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

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

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

也使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>

用悬停触发单击事件有一个小错误。如果鼠标进入，然后点击会产生相反的效果。鼠标移出时打开，鼠标移进时关闭。一个更好的解决方案:

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

最好的方法是用悬停来触发引导点击事件。这样，它应该仍然保持触摸设备友好

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

更新了一个适当的插件

我已经发布了一个合适的下拉悬停功能插件，在其中你甚至可以定义点击下拉切换元素时会发生什么:

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

既然已经有很多解决方案了，我为什么要这么做?

我对所有之前存在的解决方案都有问题。简单的CSS没有在.dropdown上使用.open类，所以当下拉可见时，下拉切换元素上没有反馈。

js的那些干扰点击.dropdown-toggle，所以下拉菜单显示在悬停，然后隐藏它时，点击一个打开的下拉菜单，移动鼠标将触发下拉菜单再次显示。一些js解决方案制动iOS兼容性，一些插件不工作在现代桌面浏览器支持触摸事件。

这就是为什么我只使用标准的Bootstrap javascript API来防止所有这些问题的Bootstrap下拉悬停插件，没有任何hack。

你有这样的代码:

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

通常它对点击事件起作用，你希望它对悬停事件起作用。这是非常简单的，只需使用javascript/jquery代码:

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

这工作得很好，这里是解释:我们有一个按钮，和一个菜单。当我们悬停按钮时，我们会显示菜单，当我们将鼠标移出按钮时，我们会在100ms后隐藏菜单。如果你想知道我为什么使用它，是因为你需要时间从菜单上的按钮拖动光标。当你在菜单上时，时间会被重置，你可以在那里停留多长时间都行。当您退出菜单时，我们将立即隐藏菜单，没有任何超时。

我已经在许多项目中使用了这段代码，如果您在使用它时遇到任何问题，请随时向我提问。