函數在隱藏時觸發兩次

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

這是因爲你只冒泡停止click事件..

您還需要停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(); 
    } 
});