Search code examples
jquerymouseout

jquery - both mouseout and click off?

I have a drop down menu which is activated by click - no problem. When you mouseout it closes - no problem. I also want it to close when you click a menu item - PROBLEM.

When you click to close, it closes, but then as soon as you move the mouse it re-toggles the hidden class, presumably clashing with the mouseout.

I'm pretty new to jquery to please explain clearly.

The class 'visuallyhidden' is simply visibility: hidden.

$body.on('click', 'a.user', function(e){
      $('ul.user-links').toggleClass('visuallyhidden');
  });

  $body.on('click', 'ul.user-links', function(e){
      $('.user-links').toggleClass('visuallyhidden');
  });

  $body.on('mouseout', 'ul.user-links', function(e) {
      if($(e.toElement).parents('ul.user-links').length < 1) {
        $('ul.user-links').toggleClass('visuallyhidden');
      }
  });
Solution

  • Uhm , I guess the problem is caused by the fact you're using toggleClass(); when you click the menu voice it actually toggleClass() , but when you mouseout() it toggleClass() again. Try applying a control on mouseout like 

    if($('ul.userl-links').hasClass('visuallyhidden')){
 ..
}
 else { }

    using addClass() and removeClass() instead of toggleClass() If you make a fiddle, I'll edit the question to answer better.