Question

I have a hidden div, and upon clicking a link, it shows the div.

  <div id="baystar">
        <!-- My hidden stuff -->
  </div>

  <div class="galactica">
    <li class="menu-563"><a class="menu-563 active" href="#">Tools</a></li>
  </div>

When you click the Tools link, div.baystar shows. When you click inside of div.baystar while open, it doesn’t close. When you click anywhere outside of div.baystar, div.baystar closes. All is working well. The problem is that when I click the Tools link to close div.baystar, it closes fast, then reopens, so it fires twice.

  $(".menu-563").click(function(){
    $("#baystar").slideToggle("fast");
    $(this).toggleClass("active"); return false;
  });

 $('a.menu-563').attr('href', '#'); {
 }

 var mouse_is_inside = false;

$(document).ready(function()
{
    $('#baystar').hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    $("body").mouseup(function(){ 
        if(! mouse_is_inside) $('#baystar').hide();
    });
});

It works fine if I take out the mouse hover functions. Do I need some sort of delay, or does my code just need rewriting?

Answer 1

This happens because you only stop the click event from bubbling..

You need to also stop the mouseup so that it does not reach body

  $(".menu-563").click(function(){
    $("#baystar").slideToggle("fast");
    $(this).toggleClass("active"); return false;
  }).mouseup(function(e){return false;});

---

You could do this instead to handle the whole thing..

$(".menu-563").click(function(e) {
    $("#baystar").slideToggle("fast");
    $(this).toggleClass("active");
    return false;
});

$('body').click(function(e){
    if (!$(e.target).closest('#baystar').length){
       $("#baystar").hide();
    }
});