用於切換特定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()更改$content.slideToggle() $(this).next().slideToggle()假設.content始終是.toggle的下一個兄弟

編輯：因為它不是，你可以做的是使用postid s。 我認為最好使用data-postid屬性而不是將其添加到id （或兩者都做），這樣你就不必從ID中解析它。

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