悬停时打开的引导下拉菜单

Bootstrap dropdown menu to open on hover

本文关键字：下拉菜单 悬停      更新时间：2023-09-26

我的网站使用Bootstrap。该网站的菜单正在使用下拉菜单。通过对另一个线程的更改，我使下拉菜单在鼠标悬停时自动打开。

$(".dropdown").hover(
    function(){ $(this).addClass('open') },
    function(){ $(this).removeClass('open') }
);

但是，我不仅在我的网站导航中使用了 drowdown 菜单，而且还在另一个位置使用，作为用户名的下拉菜单。在这里，在鼠标悬停时自动打开菜单是不需要的。

用户菜单的代码：

<span class='dropdown mousehand nobr'>
    <span data-toggle='dropdown'>$username <span class='caret'></span></span>
    <ul class='dropdown-menu' role='menu' aria-labelledby='dLabel'>
        <li><a href='http://steamcommunity.com/profiles/$steamid' target='_blank'>Steam profile</a></li>
        <li><a href='http://www.steamgifts.com/user/id/$steamid' target='_blank'>SteamGifts profile</a></li>
    </ul>
</span>

现在我的问题是，谁可以帮助我防止悬停效果发生在这个元素上？

我尝试给属性"数据切换"另一个名称，例如 dropdown2。但是，这完全破坏了菜单。即使用户单击它，它也不会再打开。有没有像我可以添加到 JS 代码中的类，这样它只会在该类上执行悬停功能？

因此，总结一下我想要的是悬停效果，它会自动打开菜单以继续在导航栏中的菜单上工作，而不是其他任何地方。

您可以为

要具有此行为的下拉列表设置id，然后根据id进行选择。像这样：

<ul id="dropdownId" class='dropdown-menu' role='menu' aria-labelledby='dLabel'>
$("#dropdownId").hover(
    function(){ $(this).addClass('open') },
    function(){ $(this).removeClass('open') }
);

有时解决方案可以如此简单（当然，这对我来说很难，因为我不明白jQuery是如何工作的）;)

通过将元素添加到类查找li.dropdown来更改代码，使其停止处理上述代码。（上面的代码需要span.dropdown才能工作）。

$(function() {
    $("li.dropdown").hover(
        function(){ $(this).addClass('open') },
        function(){ $(this).removeClass('open') }
    );
});

现在，悬停在导航上完美运行，但在其他地方不执行任何操作。好！

相关文章：