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

隐藏时功能触发两次

1 个答案: