jquery - 複数のアイテムを切り替えて、一度に 1 つだけ表示したいですか?

Question

フィドル

これは私がやりたいことです：

1. <span class="more">説明 ( ) を表示/非表示にする各赤いボックス ( <div class="description">)
2. 説明を非表示にする「閉じる」リンク
3. すでに説明が開いている場合は、別の説明が開いたときに閉じる必要があります。したがって、一度に表示されるのは 1 つだけです。

ポイント1と2、これまでのところとても良いです。しかし、ポイント 3 で行き詰まっています。他の説明を見つけて非表示にしようとしましたが、失敗しました。

$(".description").not(this).next(".description").removeClass("show")

誰でも助けることができますか？

Answer 1

4 行目を次のように変更します。

$(".description").removeClass("show"),

新しいものはまだ表示されていないので、それらをすべてオフにしても問題ありません。

Answer 2

$(".description").removeClass("show"),
$(this).next(".description").toggleClass("show");

更新されたフィドル

Answer 3

これはそれを処理する必要があります: http://jsfiddle.net/SMLwc/7/

$(document).ready(function () {

  $(".more").bind("click", function () {
    $(this).next(".description").toggleClass("show")
      .parent().siblings().find(".description").removeClass("show");
  });

  $(".close").bind("click", function () {
    $(this).parent(".description").toggleClass("show");
  });

});