jquery - 隐藏时函数触发两次

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>

当您单击工具链接时，会显示 div.baystar。当您在打开时单击 div.baystar 内部时，它不会关闭。当您单击 div.baystar 之外的任意位置时，div.baystar 将关闭。一切运作良好。问题是当我单击工具链接关闭 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();
    }
});