Bootstrap Dropdown dengan Hover


179

OK, jadi yang saya butuhkan cukup mudah.

Saya telah mengatur navbar dengan beberapa menu dropdown di dalamnya (menggunakan class="dropdown-toggle" data-toggle="dropdown"), dan berfungsi dengan baik.

Masalahnya itu berfungsi " onClick", sementara aku lebih suka jika itu bekerja " onHover".

Apakah ada cara bawaan untuk melakukan ini?


Lihat plugin tepat saya yang baru diterbitkan yang mencegah masalah CSS di bawah ini dan solusi js: github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
István Ujj-Mészáros

Jawaban:


338

Solusi termudah adalah dalam CSS. Tambahkan sesuatu seperti ...

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; // remove the gap so it doesn't close
 }

Biola yang Bekerja


3
Jauh lebih baik daripada solusi 'full-built' lama. Cukup tambahkan ini dan dropdown 'klik' default berfungsi pada hover tanpa perubahan tambahan.
IamFace

47
Ini akan bertentangan dengan menu seluler bawaan yang dapat diciutkan, jadi Anda harus membungkusnya dalam break point @media (min-width: 480px)
Billy Shih

7
Juga patut dicatat: jika Anda memiliki menu dropdown dengan hubungan orangtua-anak, misalnya dalam tema wordpress, Anda perlu menghapus data-toggleatribut untuk membuat item induk dapat diklik ... Hanya hati-hati terhadap kerusakan jaminan pada layar ponsel.
Ken Prince

2
Apakah ada cara mudah untuk menonaktifkan tampilan pada klik dan menjaga perilaku melayang saja?
Micer

1
@Micer, saya baru saja menerbitkan sebuah plugin di mana Anda dapat menonaktifkan acara klik. Plugin ini bekerja tanpa hack CSS, hanya menggunakan API javascript Bootstrap, sehingga kompatibel dengan semua perangkat: github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
István Ujj-Mészáros

66

Cara terbaik untuk melakukannya adalah dengan hanya memicu acara klik bootstraps dengan membawa. Dengan cara ini, itu harus tetap menyentuh perangkat ramah

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});

1
gagal jika Anda memiliki lebih dari satu level dropdown
Connie DeCinko

1
Tidak Bekerja dengan tautan induk
pio

apakah ada cara untuk menghapus kelas Aktif setelah dropdown ditutup?
brainvision

Ada celah piksel antara elemen tarik-turun dan menu yang dapat menyebabkan menu bersembunyi saat melintasi, kecuali jika Anda cepat
Matt

1
Menggunakan beberapa dropdown membutuhkan penyaringan 'terdekat'.
err

57

Anda dapat menggunakan fungsi hover jQuery.

Anda hanya perlu menambahkan kelas opensaat mouse masuk dan menghapus kelas saat mouse meninggalkan dropdown.

Ini kode saya:

$(function(){
    $('.dropdown').hover(function() {
        $(this).addClass('open');
    },
    function() {
        $(this).removeClass('open');
    });
});

10
Jauh lebih baik daripada jawaban yang diterima. Ini menjaga logika bootstrap dan styling tetap utuh. Meskipun saya akan menyarankan menggunakan panggilan kedua kembali dan secara eksplisit menggunakan removeClass dan addClass untuk mencegah beberapa perilaku aneh ketika Anda telah mengklik tombol (di mana itu akan terbuka ketika Anda meninggalkan tombol dan tutup ketika Anda memasukkannya).
Bastiaan Linders

3
Saya juga berpikir ini adalah jawaban terbaik. Untuk membuatnya berfungsi dengan menu Bootstrap 4, saya harus menggunakan showsebagai ganti open, dan juga menyertakan dropdown-menu: $('.dropdown').hover(function() { $(this).addClass('show'); $(this).find('.dropdown-menu').addClass('show');}, function() {$(this).removeClass('show'); $(this).find('.dropdown-menu').removeClass('show');});(Maaf untuk pemformatan.)
Robin Zimmermann

Jangan bekerja jika Anda memiliki dua item menu dropdown. Saat mengarahkan kursor pada item dropdown apa pun akan menampilkan kedua submenu
Juan Antonio Tubío

23

Cara mudah, menggunakan jQuery, adalah ini:

$(document).ready(function(){
    $('ul.nav li.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
    }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
    });  
});

Saya suka transisi yang mulus, namun itu menyebabkan semua level menu meluas, bukan hanya level pertama. Saya tidak ingin menu tingkat kedua muncul sampai saya mengarahkan kursor ke induknya.
Connie DeCinko

1
Untuk mendapatkan level pertama saja, tambahkan .first() - $(this).find('.dropdown-menu').first().stop(true, true).delay(200).fadeIn(200);...
JEdot

9

Untuk CSS, ini menjadi gila ketika Anda juga mengkliknya. Ini adalah kode yang saya gunakan, juga tidak mengubah apa pun untuk tampilan seluler.

$('.dropdown').mouseenter(function(){
    if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
        if(!$(this).hasClass('open')) { // Keeps it open when hover it again
            $('.dropdown-toggle', this).trigger('click');
        }
    }
});

Kecantikan! Tx! Alternatif CSS tidak akan berfungsi pada Bootstrap 3 dan lebih tinggi.
Pedro Ferreira



5

Jadi, Anda memiliki kode ini:

<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>

<ul class="dropdown-menu" role="menu">
    <li>Link 1</li>
    <li>Link 2</li> 
    <li>Link 3</li>                                             
</ul>

Biasanya ini berfungsi pada acara klik, dan Anda ingin itu berfungsi pada acara hover. Ini sangat sederhana, cukup gunakan kode javascript / jquery ini:

$(document).ready(function () {
    $('.dropdown-toggle').mouseover(function() {
        $('.dropdown-menu').show();
    })

    $('.dropdown-toggle').mouseout(function() {
        t = setTimeout(function() {
            $('.dropdown-menu').hide();
        }, 100);

        $('.dropdown-menu').on('mouseenter', function() {
            $('.dropdown-menu').show();
            clearTimeout(t);
        }).on('mouseleave', function() {
            $('.dropdown-menu').hide();
        })
    })
})

Ini bekerja dengan sangat baik dan inilah penjelasannya: kami memiliki tombol, dan menu. Ketika kita mengarahkan tombol kita menampilkan menu, dan ketika kita keluar dari tombol, kita menyembunyikan menu setelah 100 ms. Jika Anda bertanya-tanya mengapa saya menggunakannya, itu karena Anda perlu waktu untuk menarik kursor dari tombol di atas menu. Ketika Anda berada di menu, waktu diatur ulang dan Anda dapat tetap di sana sebanyak waktu yang Anda inginkan. Saat Anda keluar dari menu, kami akan menyembunyikan menu secara instan tanpa batas waktu.

Saya telah menggunakan kode ini di banyak proyek, jika Anda menemui masalah dalam menggunakannya, jangan ragu untuk bertanya kepada saya.


Kode ini memiliki banyak masalah pada bootstrap v3. 1.) Jika ada lebih dari satu dropdown, semua dropdown ditampilkan ketika ada yang melayang. 2.) Pada layar kecil, melayang menunjukkan dropdown dengan cara yang aneh.
KayakinKoder

4

Inilah yang saya gunakan untuk membuatnya dropdown di hover dengan beberapa jQuery

$(document).ready(function () {
    $('.navbar-default .navbar-nav > li.dropdown').hover(function () {
        $('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
        $(this).addClass('open');
    }, function () {
        $('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
        $(this).removeClass('open');
    });
});

Bagus tapi tidak mendukung sub menu.
Connie DeCinko

3

Coba ini menggunakan fungsi hover dengan animasi fadein fadeout

$('ul.nav li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});

Animasi ini tidak berfungsi di kedalaman 3 tetapi bekerja di kedalaman 2. Apakah Anda punya solusi lain untuk kedalaman ke-3?
Jilani A

silakan tambahkan JSFiddle untuk referensi
Rakesh Vadnal

2

Ini akan membantu Anda membuat kelas hover Anda sendiri untuk bootstrap:

CSS:

/* Hover dropdown */
.hover_drop_down.input-group-btn ul.dropdown-menu{margin-top: 0px;}/*To avoid unwanted close*/
.hover_drop_down.btn-group ul.dropdown-menu{margin-top:2px;}/*To avoid unwanted close*/
.hover_drop_down:hover ul.dropdown-menu{
   display: block;
}

Margin ditetapkan untuk menghindari penutupan yang tidak diinginkan dan bersifat opsional.

HTML:

<div class="btn-group hover_drop_down">
  <button type="button" class="btn btn-default" data-toggle="dropdown"></button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

Jangan lupa untuk menghapus data atribut tombol -toggle = "dropdown" jika Anda ingin menghapus onclick terbuka, dan ini juga akan berfungsi ketika input ditambahkan dengan dropdown.


2

Ini hanya akan mengarahkan navbar ketika Anda tidak menggunakan perangkat seluler, karena saya menemukan bahwa mengarahkan navigasi tidak berfungsi dengan baik pada perangkat seluler:

    $( document ).ready(function() {

    $( 'ul.nav li.dropdown' ).hover(function() {
        // you could also use this condition: $( window ).width() >= 768
        if ($('.navbar-toggle').css('display') === 'none' 
            && false === ('ontouchstart' in document)) {

            $( '.dropdown-toggle', this ).trigger( 'click' );
        }
    }, function() {
        if ($('.navbar-toggle').css('display') === 'none'
            && false === ('ontouchstart' in document)) {

            $( '.dropdown-toggle', this ).trigger( 'click' );
        }
    });

});

Anda dapat menemukan solusi yang jauh lebih baik di sini: github.com/CWSpear/bootstrap-hover-dropdown .
solarbaypilot

2

Saya mencoba solusi lain, saya menggunakan bootstrap 3, tetapi menu dropdown terlalu cepat untuk dipindahkan

seharusnya Anda menambahkan class = "dropdown" ke li, saya menambahkan batas waktu

var hoverTimeout;
$('.dropdown').hover(function() {
    clearTimeout(hoverTimeout);
    $(this).addClass('open');
}, function() {
    var $self = $(this);
    hoverTimeout = setTimeout(function() {
        $self.removeClass('open');
    }, 150);
});

2

Diperbarui dengan plugin yang tepat

Saya telah menerbitkan plugin yang tepat untuk fungsionalitas dropdown hover, di mana Anda bahkan dapat menentukan apa yang terjadi ketika mengklik dropdown-toggleelemen:

https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover


Mengapa saya membuatnya, ketika sudah ada banyak solusi?

Saya memiliki masalah dengan semua solusi yang ada sebelumnya. CSS sederhana tidak menggunakan .openkelas pada .dropdown, jadi tidak akan ada umpan balik pada elemen beralih dropdown ketika dropdown terlihat.

Js yang mengganggu mengklik .dropdown-toggle, sehingga dropdown muncul di hover, kemudian menyembunyikannya ketika mengklik dropdown yang terbuka, dan memindahkan mouse akan memicu dropdown untuk muncul lagi. Beberapa solusi js adalah pengereman kompatibilitas iOS, beberapa plugin tidak bekerja pada browser desktop modern yang mendukung acara sentuh.

Itu sebabnya saya membuat plugin Bootstrap Dropdown Hover yang mencegah semua masalah ini hanya dengan menggunakan API javascript Bootstrap standar, tanpa peretasan apa pun.


1
    $('.navbar .dropdown').hover(function() {
      $(this).find('.dropdown-menu').first().stop(true, true).slideDown(150);
    }, function() {
      $(this).find('.dropdown-menu').first().stop(true, true).slideUp(105)
    });

1

Memicu suatu clickperistiwa dengan hovermemiliki kesalahan kecil. Jika mouse-indan kemudian a clickmenciptakan efek sebaliknya. Ini openssaat mouse-outdan closeketika mouse-in. Solusi yang lebih baik:

$('.dropdown').hover(function() {
    if (!($(this).hasClass('open'))) {
        $('.dropdown-toggle', this).trigger('click');
    }
}, function() {
    if ($(this).hasClass('open')) {
        $('.dropdown-toggle', this).trigger('click');
    }
});

1

html

        <div class="dropdown">

            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                Dropdown Example <span class="caret"></span>
            </button>

            <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>

        </div> 

jquery

        $(document).ready( function() {                

            /* $(selector).hover( inFunction, outFunction ) */
            $('.dropdown').hover( 
                function() {                        
                    $(this).find('ul').css({
                        "display": "block",
                        "margin-top": 0
                    });                        
                }, 
                function() {                        
                    $(this).find('ul').css({
                        "display": "none",
                        "margin-top": 0
                    });                        
                } 
            );

        });

codepen


0

Solusi yang saya usulkan mendeteksi jika tidak menyentuh perangkat dan bahwa navbar-toggle(menu hamburger) tidak terlihat dan membuat item menu induk mengungkapkan submenu di hover dan mengikuti tautannya di klik .

Juga menjadikan margin atas 0 karena kesenjangan antara navbar dan menu di beberapa browser tidak akan membiarkan Anda mengarahkan kursor ke subtitle

$(function(){
    function is_touch_device() {
        return 'ontouchstart' in window        // works on most browsers 
        || navigator.maxTouchPoints;       // works on IE10/11 and Surface
    };

    if(!is_touch_device() && $('.navbar-toggle:hidden')){
      $('.dropdown-menu', this).css('margin-top',0);
      $('.dropdown').hover(function(){ 
          $('.dropdown-toggle', this).trigger('click').toggleClass("disabled"); 
      });			
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>

$(function(){
  $("#nav .dropdown").hover(
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");
      $(this).toggleClass('open');
    },
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");
      $(this).toggleClass('open');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>


0

Bootstrap drop-down Bekerja pada hover, dan tetap dekat klik dengan menambahkan tampilan properti : blok; di css dan menghapus atribut-atribut ini data-toggle = "dropdown" role = "button" dari tag tombol

.dropdown:hover .dropdown-menu {
  display: block;
}
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">                                     
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>
</div>

</body>
</html>

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.