Question

我有一个主<div> .main-drawer和子<div> .main-hover-container，点击主<div>隐藏子<div>到目前为止好。现在我遇到的问题是，子<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" );
});

在子div上切换隐藏主div

1 个答案: