Bootstrap 4 Nav Dropdown issue if more than one dropdown

Question

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

jsfiddle

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

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

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

2.) 您将看到两个 'dropdown link'，单击顶部的展开子菜单。

3.) 单击当前展开的下方的另一个 'dropdown link'。

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

Answer 1

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

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

我基本上正在努力寻找让下拉菜单出现的最佳方法 'on hover' 桌面和下拉菜单出现 'on click' 对于 tablet/mobile。所以这就是为什么我把这段代码写在第一位的原因。

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

Bootstrap 4 Nav Dropdown issue if more than one dropdown

Bootstrap 4 Nav Dropdown issue if more than one dropdown

onclick

hover

nav

drop-down-menu

bootstrap-4