Bootstrap Dropdown dengan Hover

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?

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

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'); 
});

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');
    });
});

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);
    });  
});

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');
        }
    }
});

Di Twitter Bootstrap tidak diterapkan tetapi Anda dapat menggunakan plugin ini

Pembaruan 1:

Pertanyaan yang sama di sini

Arahkan kursor ke item nav untuk melihat bahwa item itu diaktifkan saat di arahkan. http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#

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.

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');
    });
});

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);
});

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.

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' );
        }
    });

});

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);
});

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.

    $('.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)
    });

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');
    }
});

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

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>

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>