Question

我有两个div。当用户点击div'body'div上的任何地方时，点击第一个用jquery show切换第二个。

我的问题是，当用户点击“body”div中的链接时，show会在链接加载之前执行。如果用户认为他们错过了最后一页的内容，就会产生混淆。 是否可以为“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/

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

1 个答案: