切换隐藏在子格

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