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