用戶單擊鏈接時忽略顯示/隱藏div的簡單jquery

Question

我有兩個div。 每當用戶單擊div'body'div上的任何位置時，單擊第一個將切換帶有jquery顯示的第二個。

我的問題是，當用戶單擊“ 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可以阻止事件到達正文。 添加以下代碼並檢查輸出：

$('.body > a').click(function(e) {
    e.stopPropagation();
});

這是一個演示： http : //jsfiddle.net/esJsP/5/