每个<li></li>
都有一个切换和一个内容类。
现在,当我点击切换时,会显示每个内容项。
使用jQuery,我如何确保一次只显示一个内容?
<script>
$(document).ready(function(){
var $content = $(".content").hide();
$(".toggle").on("click", function(e){
$(this).toggleClass("expanded");
$content.slideToggle();
});
});
</script>
<li class="cell" id="bar1">
<div id="update1"><?php echo $post?></div>
<div class="toggle" id="toggle1"></div>
<div id="check"><a href="#" class="check" id="check1">read</a></div>
<div class="upvote"><a href="#" class="like" id="1"><span class="thumbsup"></span>
</a></div>
<div class="upvote"><a href="#" class="like" id="upvote1">
<div id="deletepost"><a href="#" id="1">delete</a></div>
<div class="content" id="1"><img src="images/balloon.jpg"
</div>
</li>
编辑:.content不是.toggle的下一个兄弟。为了清楚起见,我删除了几个介于.toggle和.content之间的div。
由于
答案 0 :(得分:2)
将$content.slideToggle()
更改为$(this).next().slideToggle()
,假设.content
始终是.toggle
的下一个兄弟
编辑:既然不是,你可以做的是使用postid
。我认为最好使用data-postid
属性,而不是将其添加到id
(或同时执行),这样您就不必从ID中解析它。
$(".content[data-postid=" + $(this).data('postid') + "]").slideToggle();