0

クリックすると質問が赤くなり、回答が下にスライドし、他のすべての回答が上にスライドするFAQページを作成しようとしています。そのため、一度に 1 つの回答のみが公開され、公開されている場合にのみ、その質問が赤色で強調表示されます。

これはおそらく非常に簡単に達成できますが、JavaScriptの経験はあまりありません...これまでのところ、別の質問をクリックするとすべて正常に機能しますが、開いているときに同じ質問をクリックすると閉じてから再それを開く：

window.toggle_info = $ ->
  $('.toggle-button').click ->
    $('.toggle-button').removeClass("red-reply") unless $(this).hasClass('red')
    $('.toggle-info').slideUp("slow")
    $(this).next('.toggle-info').slideToggle("slow")
    $(this).toggleClass("red")

.not('red') .not('.red') :not('red')ライン上で色々使ってみ$('.toggle-info').slideUp("slow")たのですが上手くいきません。

色の切り替えは、すべての場合で正常に機能しています。

御時間ありがとうございます ：）

4

2 に答える 2

1

この部分：

$('.toggle-info').slideUp("slow")
$(this).next('.toggle-info').slideToggle("slow")

を含むすべての要素に適用さslideUpれます。したがって、それらをすべて閉じてから、クリックしたものに続きます。はそれらをすべて閉じたままにしてから、閉じたばかりのを開きます。.toggle-info$(this).next('.toggle-info')slideToggle.toggle-info.toggle-buttonslideUpslideToggle.toggle-info

.toggle-button開いているパネルをクリックしてパネルを閉じるには、次のようにします。

$next = $(this).next('.toggle-info');
$('.toggle-info').not($next).slideUp("slow")
$next.slideToggle("slow")

not呼び出しは、適用される要素から削除するだけです$next。slideUpそして、redon open のみ.toggle-buttonが必要な場合は、次のようにすることができます。

$next = $(this).next('.toggle-info');
$('.toggle-info')
  .not($next)
  .slideUp("slow")
  .prev('.toggle-button')
  .removeClass('red');
$next.slideToggle("slow")
$(this).toggleClass("red")

デモ: http://jsfiddle.net/ambiguous/TEb2A/1/

追加するものは何も表示されない.red-replyため、デモから除外しました。おそらく、そのクラスで何かをしているコードが他の場所にあると思います。

于 2012-05-31T21:53:07.240 に答える
0

私はこのスクリプトを何年もいじっていますが、もちろん、ここに投稿してから5分後に答えが得られます:/

に変更しましたが$(this).next('.toggle-info').slideToggle("slow") unless $(this).hasClass('red-reply')、動作します。

なぜそれが以前に機能しなかったのかはまだわかりません...

于 2012-05-31T21:26:39.900 に答える