用於切換特定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

編輯的下一個兄弟：因爲它不是，你可以做的是使用postid秒。我認爲最好使用data-postid屬性，而不是將它添加到id（或者兩者兼有），這樣您就不必從ID中解析它。

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