0

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.

Improve this question
5
  • There's actually a good reason why Bootstrap doesn't open menus on hover by default. Commented Jan 30, 2015 at 14:49
  • And what is that reason? Commented Jan 30, 2015 at 15:08
  • Inconsistency -- your OS menu requires a click. Touchscreens don't have a hover, so they also require a click. Commented Jan 30, 2015 at 15:10
  • With the above change, the menu works both with a click and with hover. Also I have some extra code that only makes the hover active on desktop screensizes. If viewed on mobile screens, the hover effect is not there. I'm happy how this works, seems to be good to use on all devices. Commented Jan 30, 2015 at 15:15
  • Unrelated to your question, but a quick note. You'll want to change your links from... steamgifts.com/user/id/$steamid to... steamgifts.com/go/user/$steamid The old format has been deprecated, and may not work in the future. Commented Jan 30, 2015 at 19:16

2 Answers 2

Reset to default
4

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') }
);
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Or add a class if it's a dynamic thing, something like dropdown-hover
@Christos Thanks for your answer. However if I try this, the hover effect stops working. On all elements.
@devJunk could you post this as a full answer with all the changes I need to make?
@Paul You welcome dude. This does not make sense. Let me explain why I say this. This $("#dropdowId") will select the html element with id=dropdownId. Following the convention that the id of an html element should be unique, we conclude that this $("#dropdowId") will select only the html element that we are interested in. Then this $("#dropdownId").hover(function(){}, function(){}) adds two callbacks functions, one for the mouseIn and one for the mouseOut event for the specific element. Hence that you mentioned cannot be possible.
@Christos I understand what you are saying. I double checked the code, but I added your changes just as you suggested. However the menu is then no longer opening on a hover. No idea why not, might be due to the Bootstrap code is dependant on .dropdown being used?
|
1

Sometimes the solution can be so simple (off-course it was hard for me, since I fail to understand how jQuery works) ;)

Changing the code by adding an element to the class lookup li.dropdown, makes it stop working on the above code. (The above code would need a span.dropdown to work).

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

Now the hover works perfectly on the navigation, but doesn't do anything elsewhere. Nice!

Improve this answer

3 Comments

Just a note on this (at least with my tests): If you open a .dropdown via hover, and then click on it, and then try hover again, it won't work. If that's not happening with you, then it must be a bug with my setup...
@MikeAnthony I don't have this problem on my site. bundlequest.com See here how it happens to work for you too?
Seems to work fine there... I may have done something wrong on my end. But nonetheless, the approach I needed for my app was different (trying to emulate a standard Windows menu).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.