为那些想在移动设备上使用默认功能的用户添加这个功能。可以设置min-width:…根据需要

@media only screen and (min-width: 1195px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
  ul.nav li.dropdown> ul.dropdown-menu {
    display: none;
  }
}

设置display: none，这样下拉开关就不会产生问题。如果保持原样，可能会同时打开两个下拉列表。

我们看到，除了“My Head Hurts”的答案，“Cory Price”还发现了两个问题:

问题1:单击下拉链接将打开下拉菜单。它会一直打开，除非用户点击某个地方 或者返回到它上面，创建一个尴尬的UI。 解决方案:从导航链接中删除“class”和“data-toggle”元素

这个解决方案近乎完美，但这里的问题是，当涉及到移动设备和平板电脑时，它就行不通了!

我使用了一些jQuery代码来修复这个问题..

if ($(window).width() > 769) {
    $('.dropdown-toggle').removeAttr('data-toggle');
    $('.dropdown-menu').removeAttr('style');
    $('.dropdown').removeClass('open');
}
$(window).resize(function () {
    if ($(window).width() > 769) {
        $('.dropdown-toggle').removeAttr('data-toggle');
        $('.dropdown-menu').removeAttr('style');
        $('.dropdown').removeClass('open');
    }
    else {
        $('.dropdown-toggle').attr("data-toggle", "dropdown");
    }
});

注意:这里我们假设移动设备和平板电脑的折痕从768px开始。

我已经发布了一个Bootstrap 3下拉悬停功能的插件，在这个插件中，你甚至可以定义点击下拉切换元素时发生的事情(点击可以被禁用):

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

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

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

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

这就是为什么我只使用标准的Bootstrap javascript API来防止所有这些问题的Bootstrap下拉悬停插件，没有任何hack。甚至Aria属性在这个插件中也工作得很好。

Bootstrap 4, 2019

我读了很多这样的答案，但最后我自己做了，因为这不是我需要的。

我有引导4，并希望保持点击+悬停功能。此外，我想启用它只有下拉有一个额外的类“.open-on-hover”。

我还想保持Bootstrap的Jquery定位下拉菜单时，它是旁边的页面边缘。所以我们不仅仅要做"display: block"我们想要完整的Bootstrap工作方式。所以我只是触发点击。

逻辑是，如果它是mouseenter则打开它，如果它是mouseleave则隐藏它，如果它是打开的

/**
 * Open Bootstrap 4 dropdown on hover
 */
$(document).on('mouseenter mouseleave', '.dropdown.open-on-hover', function(e) 
{
    let toggler = $(this).find('[data-toggle="dropdown"]').first();

    if(e.type === 'mouseenter') {
        $(toggler).trigger('click', 'open');
    } else if ($(this).children('.dropdown-menu.show').length) {
        $(toggler).trigger('click', 'close');
    }
});

html

<div class="dropdown open-on-hover">
    <div class="btn" data-toggle="dropdown">
        Hover or click me
    </div>
    <div class="dropdown-menu">
        <a class="dropdown-item">
            Item 1
        </a>
        <a class="dropdown-item">
            Item 2
        </a>
    </div>
</div>

使用以下代码在鼠标悬停时打开子菜单(仅适用于桌面):

$('ul.nav li.dropdown').hover(function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').show();
    }
}, function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').hide().css('display','');
    }
});

如果你想让第一关菜单是可点击的，甚至在手机上也可以添加这个:

    $('.dropdown-toggle').click(function() {
    if ($(this).next('.dropdown-menu').is(':visible')) {
        window.location = $(this).attr('href');
    }
});

子菜单(下拉菜单)将打开鼠标悬停在桌面上，点击/触摸移动和平板电脑。 一旦子菜单打开，第二次单击将让您打开链接。 多亏了if ($(window).width() > 767)，子菜单将在移动设备上采用全屏宽度。

为了让菜单在悬停时自动下落，这可以使用基本的CSS实现。您需要计算出隐藏菜单选项的选择器，然后将其设置为在适当的li标记悬停时显示为块。以twitter引导页面为例，选择器如下所示:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

然而，如果你正在使用Bootstrap的响应特性，你将不希望这个功能出现在折叠的导航栏上(在较小的屏幕上)。为了避免这种情况，可以将上面的代码包装在媒体查询中:

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

要隐藏箭头(插入符号)，这取决于你是使用Twitter Bootstrap版本2或更低版本3，以不同的方式完成:

引导3

要在版本3中删除插入符号，你只需要从.dropdown-toggle锚定元素中删除HTML <b class="插入符号"></b>:

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <-- remove this line
</a>

Bootstrap 2 &更低

要删除版本2中的插入符号，您需要对CSS有更多的了解，我建议更详细地了解:after伪元素是如何工作的。为了让你开始理解，在推特引导例子中瞄准并删除箭头，你将使用以下CSS选择器和代码:

a.menu:after, .dropdown-toggle:after {
    content: none;
}

如果你深入研究这些方法，而不是仅仅使用我给你的答案，这会对你有利。

感谢@CocaAkat指出，我们错过了“>”子组合子，以防止子菜单显示在父悬停