如果有多个下拉列表，则Bootstrap 4 Nav Dropdown问题

Question

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

jsfiddle

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

所以在jsfiddle中你就是这个问题的原因：

1。）减小输出选项卡的宽度，使其显示移动菜单（991px或更低）

2。）您将看到两个下拉链接＆＃39;，点击展开子菜单的顶部链接。

3。）点击另一个＆＃39;下拉链接＆＃39;低于当前扩展的那个。

请注意，这两个下拉列表现已关闭 - 应该已打开第二个下拉列表。

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