jquery - 如何防止内容点击在jquery中切换父级？

Question

我正在单击标题来切换内容......

我想要的是一旦显示内容...如果在黄色区域单击它，则阻止切换它。 (我正在使用 li，我希望它保持这样)

$(".liContent").hide();
$(document).on("click","li",function() { 

$(this).find(".liContent").toggle();


});

li{margin:5px; border:1px solid red}
.liContent{background:yellow;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<ul>
<li>A <div class="liContent">A Content</div>
</li>

<li>B <div class="liContent">B Content</div>
</li>

</ul>

我该怎么做？

Answer 1

通过向函数添加事件参数 (e)，您可以使用 e.target 定位单击的项目。它与 $(this) 不同，后者指的是处理程序绑定(bind)到的元素(或者，在事件委托(delegate)的情况下，指的是委托(delegate)元素 li)。

要确保点击的元素不是liContent，您可以使用!$(e.target).is(".liContent"):

if (!$(e.target).is(".liContent")) {
  //.liContent was not clicked
}

$(".liContent").hide();
$(document).on("click", "li", function(e) {
  if (!$(e.target).is(".liContent")) {
    $(this).find(".liContent").toggle();
  }
});

li {
  margin: 5px;
  border: 1px solid red
}

.liContent {
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<ul>
  <li>A
    <div class="liContent">A Content</div>
  </li>
  <li>B
    <div class="liContent">B Content</div>
  </li>
</ul>