jquery - toggle hiding main div on sub div

Question

I have a main <div> .main-drawer and sub <div> .main-hover-container and on click the main <div> hides the sub <div> so far so good. Now the issue I am faced with is that the sub <div> has a URL link but on click it's triggering the toggle of the main <div>.

How can i exclude the .main-hover-container to not be effected on click so the link in the sub <div> can be clicked.

    <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

You can check if the source of event is child div then you can skip execution of funciton.

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