Question

有人可以告诉我如何在toogle之后取消以下<a>元素？（它是可见的，但我无法点击它）谢谢！

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

问题是孩子也会调用切换事件。 if(e.target === this )行会忽略它。

这是css代码：

#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

尝试添加

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

我仍在试图弄清楚它为什么会这样：）

Fiddle

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

1 个答案: