Question

我的网站使用Bootstrap。该网站的菜单使用下拉菜单。随着另一个线程的更改，我将下拉菜单设置为在mouseOver上自动打开。

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

但是，我不仅在我的网站导航中使用了下拉菜单，而且还在另一个位置使用了下拉菜单，作为用户姓名的下拉列表。在此处不需要在mouseOver上自动打开菜单。

用户菜单代码：

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

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

我尝试过提供属性＆＃39;数据切换＆＃39;另一个名字，如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') }
);

Answer 2

与您的问题无关，但请注意。你想要改变你的链接......

http://www.steamgifts.com/user/id/ $ steamid

为...

http://www.steamgifts.com/go/user/ $ steamid

旧格式已被弃用，将来可能无效。

Answer 3

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

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

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

现在悬停在导航上完美运行，但在其他地方没有做任何事情。尼斯！

在悬停时打开的Bootstrap下拉菜单

3 个答案: