javascript - jQuery 在父元素上切换 onclick

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/

Answer 1

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

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

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

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