javascript - 调用子函数时阻止父 jquery 函数

Question

我遇到了父/子 jquery 函数冲突的问题。子函数是 Bootstrap 函数，父函数是自定义函数。这个想法是父 div(见下面的代码)可以包含太多数据，因此应该限制高度。当您在 div 中单击以展开它时会有一个切换，但当我单击一个子元素时不应发生这种情况，因为这个子元素也会向下折叠。

<div id="items" class="semiCollapsed">
  <span data-toggle="collapse" data-target="#x" > an item</span>
  <div id="x" class="collapse">description of item</div>
  ... more items ...
</div>

我的父级 JQuery 的函数是:

jQuery(document).ready(function() {
  jQuery('#items').click(function(event) {
    event.preventDefault();
    $("#items").toggleClass("semiCollapsed");
  })
});

和CSS:

.semiCollapsed {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-height:110px;
}

Bootstrap 崩溃:

http://pastebin.com/Xfnq7R4i

我遇到的问题是当我调用子函数时父函数被调用。如何解决这个问题？

JSFiddle:

http://jsfiddle.net/7fdjL3qx/

Answer 1

如果点击的元素不是目标，我们必须返回。 if (event.target !== this) return;

    jQuery('#items').on('click', function (event) {
        if (event.target !== this) return;
        event.preventDefault();
        $(this).toggleClass("semiCollapsed");
    });

fiddle : http://jsfiddle.net/abhiklpm/7fdjL3qx/1/