Javascript jQuery在父元素上切换onclick

如果单击

.ab head

，如何隐藏

.ab content

的内容？当我点击

ab head

时，也会隐藏

内容

。使用我现在拥有的代码，它几乎可以工作，但当我单击其中一个时，所有内容都被切换

如何仅在

父div

上维护该功能？有什么想法吗

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

一些名字1
一些文字bla bla bla 1

一些名字2
一些文本bla bla bla 2

---

示例：

只需切换

.ab content

的下一个实例：

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

您还可以使用

此

关键字引用用户单击的当前

：

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

虽然如果你想在点击时隐藏内容，可能最好按照它的建议做一些事情

快速演示：

$（“.ab容器”）。在（“单击”，函数（）上）{
$（this.find（“.ab content”）.toggle（）；
});

一些名字1
一些文字bla bla bla 1

一些名字2
一些文本bla bla bla 2

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


$（'.ab container'）。在（'click'，'.ab content，.ab head'，function（）上{
$（this）.closest（'.ab container'）.find（'.ab content'）.toggle（）；
});

一些名字1
一些文字bla bla bla 1

一些名字2
一些文本bla bla bla 2