如果有多个下拉菜单，则 Bootstrap 4 Nav Dropdown 问题答案

【问题标题】：Bootstrap 4 Nav Dropdown issue if more than one dropdown如果有多个下拉菜单，则 Bootstrap 4 Nav Dropdown 问题
【发布时间】：2017-12-26 19:45:58
【问题描述】：

jsfiddle：http://jsbin.com/wamunoside/1/edit?html,output

jsfiddle

这取自 Bootstrap 4 文档网站上给出的示例：只需在此处找到的第一个下拉列表下方添加第二个下拉列表即可： https://v4-alpha.getbootstrap.com/components/navbar/#navbarNavDropdown

所以在 jsfiddle 中，这就是导致问题的原因：

1.) 减小输出选项卡的宽度，使其显示移动菜单（991 像素或更小）

2.) 您将看到两个“下拉链接”，点击展开子菜单的顶部。

3.) 点击当前展开的下方的另一个“下拉链接”。

注意两个下拉菜单现在都关闭了 - 应该打开了第二个下拉菜单。

【问题讨论】：

对于 Bootstrap 4 BETA 来说似乎不是问题：jsbin.com/wowuwizolo/edit?html,output（原始示例 Bootstrap 4 ALPHA）
该死的 Bootstrap 4 版本太多了...所以在我的项目中我使用的是 Bootstrap 4 beta，然后还有 bootstrap 4 alpha 和 Bootstrap 4 beta 2。这个问题仍然存在于Bootstrap 4 beta，并在 Bootstrap 4 beta 2 中第一次修复——但该版本不向后兼容 Bootstrap 4 beta 并且完全破坏了我的标题。
实际上这是为 Bootstrap 4 beta 修复的，只是我自己的代码破坏了它。

标签： drop-down-menu onclick hover bootstrap-4 nav

【解决方案1】：

最终问题是我的代码... 如果event.type == "mouseleave"，我添加了以下内容，这似乎已经很好地解决了这个问题，但仍然不完美（对于桌面）：

http://jsbin.com/yiyohatequ/edit?html,css,js,output

我基本上在努力寻找让下拉菜单在桌面上显示'悬停'和下拉菜单在平板电脑上显示'点击'的最佳方式/移动的。所以这就是我把这段代码放在第一位的原因。

/* Prevent more than 1 dropdown showing up at once*/
$('.nav-link').hover(function (event) {
//breaks mobile if this fires on "mouseenter". so only fire on "mouseleave"
if (event.type == "mouseleave") {
    var hovered = this.nextElementSibling;//.dropdown-menu
    var navdropdowns = $('.dropdown-menu');
    navdropdowns.each(function (a, b) {
        if (hovered != b) {
            $(b).removeClass('show');
        }
    });
} 
})

【讨论】：