这只在你不在移动设备上时悬浮导航栏，因为我发现在移动设备上悬浮导航栏并不好:

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

});

使用jQuery的一个简单方法是:

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

最简单的解决方案是CSS。加上一些像……

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

工作小提琴

我提出的解决方案检测，如果它不是触摸设备，导航栏切换(汉堡菜单)是不可见的，并使父菜单项显示的子菜单悬停和跟随它的链接点击。

也使tne margin-top为0，因为在某些浏览器中，导航栏和菜单之间的间隙不会让你悬停在子项上

$(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>

使用mouseover()函数触发单击。这样就不会对以前的点击事件造成伤害。用户可以使用悬停和点击/触摸。它将是移动友好的。

$(".dropdown-toggle").mouseover(function(){
    $(this).trigger('click');
})

这只在你不在移动设备上时悬浮导航栏，因为我发现在移动设备上悬浮导航栏并不好:

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

});