函数在隐藏时触发两次

Question

我有一个隐藏的div，在单击链接时，它会显示该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>

单击Tools链接时，将显示div.baystar。当您在打开时单击div.baystar内部时，它不会关闭。当您单击div.baystar之外的任意位置时，div.baystar将关闭。一切都运行良好。问题是，当我单击Tools链接关闭div.baystar时，它会快速关闭，然后重新打开，因此它会触发两次。

  $(".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();
    });
});

如果我去掉鼠标悬停功能，它工作得很好。我是否需要某种延迟，或者我的代码只需要重写？

Answer 1

发生这种情况是因为您只停止了单击事件的冒泡。

您还需要停止mouseup，使其无法到达body

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

你可以这样做来处理整个事情..

$(".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();
    }
});