时间戳

首页 > 解决方案 > 如何防止内容单击以在 jquery 中切换父级？

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

问题描述

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

我想要的是一旦显示内容......如果在黄色区域单击它，请防止切换它。（我正在使用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>

我该怎么做？

标签： jqueryhtml

解决方案

通过向函数 ( ) 添加事件参数e，您可以使用e.target. 它与 不同$(this)，后者指的是处理程序绑定到的元素（或者，在您的事件委托的情况下，委托的元素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>

推荐阅读