如果点击.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>
最佳答案
只需切换 .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>
关于javascript - jQuery 在父元素上切换 onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36318505/