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

Posted 2021-05-05

的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.）您将看到两个“下拉链接”，单击顶部的一个扩展子菜单。

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

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

答案

最后问题是我的代码...我添加了以下如果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');
        }
    });
} 
})