Javascript 使用引导4在导航栏中悬停问题

我已经用bootstrap4创建了一个

navbar

。当我点击一个下拉菜单链接时，它会打开并保持打开状态——当我停留在另一个下拉链接上时，它们会重叠

我希望它这样一个下拉链接将被关闭，如果我在另一个下拉链接悬停

以下是我的

navbar

下拉列表的代码：

。下拉：悬停>。下拉菜单{
显示：块；
}

欢迎光临-Maqbool解决方案

您必须在自定义的

文件中添加以下

jQuery

代码

$('.nav-link').hover(function() {
  $(this).closest('.nav-item.dropdown').siblings('.nav-item.dropdown').removeClass('show').find('.dropdown-menu').removeClass('show');
})

问题是，当您单击

下拉链接时，名为
的类将添加到
.nav项中。下拉菜单
和
。下拉菜单
，因此，当您将鼠标悬停在其他
下拉链接上时，必须删除
show类


$（'.nav link'）.hover（函数（）{
$（this）.closest（'.nav item.dropdown'）。同胞（'.nav item.dropdown'）。removeClass（'show'）。find（'.dropdown menu'）。removeClass（'show'）；
})
。下拉：悬停>。下拉菜单{
显示：块；
}

欢迎光临-Maqbool解决方案

















在代码中，当鼠标悬停或单击事件被触发时，“show”类应用于子菜单（下拉菜单）元素

因此，您可以覆盖该类，如下所示：

.dropdown-menu.show {
   display: none;
}

要解决您的问题并仅在悬停时显示菜单项，只需添加以下CSS行：

    .dropdown:hover > .dropdown-menu,
    .dropdown:hover > .dropdown-menu.show {
        display: block;
    }
    .dropdown > .dropdown-menu,
    .dropdown > .dropdown-menu.show {
        display: none;
    }

活跃的班级没有消失。我试过你的建议，但没用。你能帮我吗me@MuhammadIlyas也许您没有将
jQuery
代码放在正确的位置，因为它在上面的代码段中工作。您必须将
jQuery
代码放在bootstrap下面。jssir我尝试在script标记中使用jQuery代码，但没有修复。并更改bootstrap.js文件的顺序also@MuhammadIlyas你能给我看一下你剧本的截图吗order@MuhammadIlyas你把脚本代码放在哪里了？我在你提供的链接代码中找不到。不，我认为这没有什么问题。单击多个链接项，然后将鼠标悬停在它们上，您将获得场景。