jquery切换阻止了孩子的点击事件

Question

Could somebody tell me how to achive the following <a> element not to be blocked after toogle? (It is visible, but I cant click on it) Thanks!

<div id='gear_icon'>
   <div id='gear_div'>
      <ul>
         <li>
            <a href="go.php">I'M BLOCKED</a></li></ul></div></div>

---

$("#gear_icon").toggle(function(e)
{
    if(e.target === this )
    //show gear-div
    $('#gear_div').css({display:"block",opacity: 0.0}).animate({opacity: 1}, 1000);
},function(e)
{
    if(e.target === this )
    //hide gear_div
    $('#gear_div').animate({opacity:0},1000,function()
    {
        $('#gear_div').css({display:"none"});
    }); 
});

The problem is that the child also calls the toggle event. if(e.target === this ) line makes it ignored.

Here is the css code:

#gear_icon{
background-color: green;
width: 25px;
height: 29px;
cursor: pointer;
border: none;
margin-top: 4px;
margin-bottom: 2px; 
position:absolute;
}
#gear_div{
cursor:default; 
display: none;
/*opacity: 0; $('#gear_div').css({ opacity: 0.0});*/
background-color: #AFD824;
width: 308px;
height: 26px;
position: relative;
top: 0;
left: 27px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

Answer 1

Try adding

$("a").click(function(e){ e.stopPropagation();})

I'm still trying to figure out why it works like this:)

Fiddle .