[英]JQuery Toggle next class
I am making a blogging website and want to have headers or links show the post when clicked, I have it working so they all open when one is clicked but I just want it to be the one below the header 我正在创建一个博客网站,希望单击时显示标题或链接,我可以正常使用,因此单击它们时它们都可以打开,但我只希望它是标题下方的一个
JQuery : jQuery的:
$(document).ready(function(){
$('.slidingDiv').hide();
$('.show_hide').show();
$('.show_hide').click(function(){
$('.slidingDiv').slideToggle();
});
});
PHP : PHP的:
for($i=0; $i<5; $i++)
{
print "
<a href='#' class='show_hide'>Article name</a>
<div class='slidingDiv'>
Fill this space with really interesting content.
</div>
<br>
<br>
";
}
Thanks in advance 提前致谢
You can use .next
to select only the next .slidingDiv
您可以使用.next
仅选择下一个.slidingDiv
$(this).next('.slidingDiv').slideToggle();
Snippet 片段
$('.slidingDiv').hide(); $('.show_hide').show(); $('.show_hide').click(function() { $(this).next('.slidingDiv').slideToggle(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href='#' class='show_hide'>Article name</a> <div class='slidingDiv'> Fill this space with really interesting content. </div> <br> <br> <a href='#' class='show_hide'>Article name</a> <div class='slidingDiv'> Fill this space with really interesting content. </div>
You should find the next .slidingDiv
element: 您应该找到下一个.slidingDiv
元素:
$(document).ready(function(){
$('.slidingDiv').hide();
$('.show_hide').show();
$('.show_hide').click(function() {
// 'this' is now the clicked .show_hide element
$(this).next().slideToggle();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.