javascript - 带有单击事件的容器内的复选框

Question

<div class="toggle-bar">
    <h3><input type="checkbox" class="select-all"> Title</h3>
</div>

<div class="content">
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
</div>

当我点击.toggle-bar时，.content将触发toggle()。但是，如果我选中该复选框，如何防止 toggle() 发生呢？

我尝试了以下方法，但对我不起作用:

$(".toggle-bar").click(function() {
    $(this).next(".content").toggle();
}).children(".select-all").click(function(e) {
    e.stopPropagation();
});

Answer 1

在子元素点击事件中使用stopPropagation来阻止父元素点击。

$(".select-all").click(function(e) {
  e.stopPropagation();
  //
});