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

Question

My website uses Bootstrap. The menu of the site is using dropdown menu's. And with a change from another thread, I made the dropdown menu's to auto open on mouseOver.

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

However I not only use the drowdown menu's in my site navigation, but also on another location, as a dropdown on the user's name. Having the menu open automatically on mouseOver is unwanted here.

Code for the user menu:

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

Now my question is, who can help me to prevent the hover effect from happening on this element?

I tried giving the attribute 'data-toggle' another name, like dropdown2. However this breaks the menu completely. It won't open at all any more even if the user clicks on it. Is there like a class I can add to the JS code so it will only do the hover function on that class?

So to summarize what I want, is the hover effect that auto opens the menu to stay working on the menu's in the navigation bar, but not anywhere else.

Answer 1

You could set an id to the dropdown you want to have this behavior and then make the selection based in the id. Something like this:

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

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