jQuery切换单击父元素时的操作

Question

如果我点击.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/

- m3tsys

Answer 1

只需切换下一个 .ab-content 的实例即可：

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

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

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

如果您想要在单击时隐藏内容，最好按照itsgoingdown的建议进行操作。

快速演示：

$(".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>

- James Hibbard

Answer 2

您可以使用事件委托来完成此操作：
请查看下面的代码片段。

$('.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>

- The Process