jquery - 用于切换特定 div 的 jQuery 切换功能（而不是所有具有相同类名的 div。）

Question

每个<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。

谢谢

Answer 1

更改$content.slideToggle()为$(this).next().slideToggle()假设.content始终是下一个兄弟.toggle

编辑：既然不是，你可以做的是使用postids. 我认为使用该data-postid属性而不是将其添加到id（或两者都做）会更好，这样您就不必从 ID 中解析它。

$(".content[data-postid=" + $(this).data('postid') + "]").slideToggle();