切換隱藏在子格

Question

主要DIV我有一個主<div>.main-drawer和子<div>.main-hover-container並單擊主<div>揣子<div>到目前爲止好。現在我面臨的問題是，sub <div>有一個URL鏈接，但點擊它觸發主要<div>的切換。

我如何排除.main-hover-container在點擊時不受影響，因此可以點擊子<div>中的鏈接。

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".main-drawer").toggle(function(){ 
    $(this).closest(".main-drawer").find('.main-hover-container').stop(true).fadeTo("fast", 1.0); 
    }, function(){  
    $(".main-hover-container").fadeOut("fast"); 
    }); 

}); 
</script> 

Answer 1

您可以檢查事件的來源是否是子div，那麼您可以跳過功能的執行。

$(".main-drawer").toggle(function(event){ 
    if($(event.target).hasClass("main-hover-container")) 
     return; 
    $(this).closest(".main-drawer").find('.main-hover-container').stop(true).fadeTo("fast", 1.0); 
    }, 
    function(){  
     if($(event.target).hasClass("main-hover-container")) 
       return; 
     $(".main-hover-container").fadeOut("fast"); 
});