0

それぞれ<li></li>にトグルとコンテンツ クラスがあります。現在、トグルをクリックすると、すべてのコンテンツ アイテムが表示されます。jQuery を使用して、一度に 1 つのコンテンツのみが表示されるようにするにはどうすればよいですか?

<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 を削除しました。

ありがとう

4

1 に答える 1

2

それが常に次の兄弟である$content.slideToggle()と$(this).next().slideToggle()仮定するように変更.content.toggle

編集：そうではないので、できることはpostidsを使用することです。IDから解析する必要がないように、data-postid属性をに追加する（または両方を行う）のではなく、属性を使用する方が良いと思います。id

$(".content[data-postid=" + $(this).data('postid') + "]").slideToggle();
于 2013-06-22T20:44:46.580 に答える