jQuery在父元素上切换onclick

jQuery toggle onclick on parent element

本文关键字：onclick 元素 jQuery      更新时间：2023-10-18

如果单击.ab-head，如何隐藏.ab-content的内容？当我单击ab-head并且content可见时，也会隐藏。使用我现在的代码，它几乎可以工作，但当我单击其中一个时，所有内容都会切换。

如何仅在parent div上维护该功能？有什么想法吗？

$(document).ready(function(){
    $(".ab-head").click(function(){
        $(".ab-content").toggle();
    });
    $(".ab-content").click(function(){
        $(".ab-content").toggle();
    });
});

<div class="ab-container">
    <div class="ab-head">
        <h1>some name 1</h1>
    </div>
    <div class="ab-content">
        <p>some text bla bla bla 1</p>
    </div>
</div>
<div class="ab-container">
    <div class="ab-head">
        <h1>some name 2</h1>
    </div>
    <div class="ab-content">
        <p>some text bla bla bla 2</p>
    </div>
</div>

示例：https://jsfiddle.net/yppn4nex/

只需切换.ab-content:的下一个实例

$(".ab-head").click(function(){
  $(this).next(".ab-content").toggle();
});

您还可以使用this关键字引用用户单击的当前<div class="ab-content">：

$(".ab-content").click(function(){
  $(this).toggle();
});

尽管如果你想在点击时隐藏内容，最好按照它本身的建议做一些事情。

快速演示：

$(".ab-container").on("click", function(){
  $(this).find(".ab-content").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ab-container">
  <div class="ab-head">
    <h1>some name 1</h1>
  </div>
  <div class="ab-content">
    <p>some text bla bla bla 1</p>
  </div>
</div>
<div class="ab-container">
  <div class="ab-head">
    <h1>some name 2</h1>
  </div>
  <div class="ab-content">
    <p>some text bla bla bla 2</p>
  </div>
</div>

您可以通过事件委派这样做：
检查下面的代码段

$('.ab-container').on('click', '.ab-content ,.ab-head', function() {
  $(this).closest('.ab-container').find('.ab-content').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ab-container">
  <div class="ab-head">
    <h1>some name 1</h1>
  </div>
  <div class="ab-content">
    <p>some text bla bla bla 1</p>
  </div>
</div>
<div class="ab-container">
  <div class="ab-head">
    <h1>some name 2</h1>
  </div>
  <div class="ab-content">
    <p>some text bla bla bla 2</p>
  </div>
</div>

相关文章：