Bootstrap drop-down menu to open on hover

advertisements

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.


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') }
);