简单的jquery忽略显示/隐藏div当用户点击链接

Question

我有两个div。当用户点击div'body'div上的任何位置时，点击第一个点击jquery show。

我的问题是，当用户点击'body'div中的链接时，节目会在链接加载之前执行。它会让那些认为自己错过了最后一页的用户感到困惑。 是否可以为“body”div中的链接创建一个简单的例外？

<div> 
     <div class="body"> 
     <p>Some really good links</p> 
     o Example Org: <a href="http://example.org">example.org</a><br> 
     o Example Dotcom: <a href="http://example.com">example.com</a> 
     </div> 
     <div class="toggle" style="display: none;"> 
     <p>Some really detailed information here.</p> 
     </div> 
</div> 

我的JavaScript像这样：

<script> 
$(document).ready(function() { 
    bindToggle; 
}); 

function bindToggle() { 
    $(".toggle").hide(); 
    $(".body").click(function(event) { 
     el = $(this).next(); 
     if (el.is(":visible")) { 
      el.hide('fast'); 
     } else { 
      el.show('fast'); 
     } 
    }); 
}; 
</script> 

这里是一个演示：http://jsfiddle.net/esJsP/3/

Answer 1

在身体链接的点击呼叫event.stopPropagation到达身体停止活动。添加下面的代码并检查输出：

​​

这里是一个演示：http://jsfiddle.net/esJsP/5/