javascript - 悬停时打开的 Bootstrap 下拉菜单

Question

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

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

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

用户菜单代码:

<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>

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

我尝试为属性“data-toggle”指定另一个名称，例如 dropdown2。然而，这完全破坏了菜单。即使用户点击它，它也不会再打开。 是否有一个类我可以添加到 JS 代码中，这样它只会在该类上执行悬停功能？

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

Answer 1

您可以为您希望具有此行为的下拉列表设置一个 id，然后根据 id 进行选择。像这样的事情:

<ul id="dropdownId" class='dropdown-menu' role='menu' aria-labelledby='dLabel'>

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