0

アコーディオンメニューがあり、各メニューヘッダーには、メニューが上下にスライドすると変化する小さな矢印imgがあります。

これまでのコードは次のとおりです。

    $(document).ready(function() {
    $("div.menu_body").hide();
    $("#menuheader div.menu_head div.detailsPanel").toggle(function() {
      $(this).addClass("detailsPanelSelected").parent(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
    },
      function() {

 $(this).removeClass("detailsPanelSelected").parent(this).next("div.menu_body").slideUp("slow");
      }
    );

これは、一度に1つのメニュー項目を切り替えるときに正常に機能します。

ただし、1つのメニュー項目を展開し、別のメニューヘッダーをクリックするとします。予想どおり、最初のメニュー項目が上にスライドし、新しくクリックされたメニュー項目が下にスライドします。ただし、上にスライドするメニューでは、矢印gifは元に戻りません。これは、トグル関数がまだ最初の状態にあるために発生します。もう一度クリックして「detailsPanelSelected」クラスを削除すると、画像が元に戻るだけです。コードを見ると、これは予想されます。

だから私の質問は、別のメニューヘッダーがクリックされたときにメニュー項目「detailsPanelSelected」が削除されるようにするにはどうすればよいですか？保留中のトグル機能をどうにかしてリセットできますか？

4

2 に答える 2

0

try something like this:

$("#menuheader div.menu_head div.detailsPanel").toggle(function() {

$(".detailsPanelSelected").each(function(i){ this.removeClass("detailPanelSelected"); })

$(this).addClass("detailsPanelSelected").parent(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");

}

the important part of the code is this:

$(".detailsPanelSelected").each(function(i){ this.removeClass("detailPanelSelected"); })

it should be placed above the code in which you add the class that changes the arrow's direction... therefore all of the elements are back to their closed state, then your next function "opens" the correct one

于 2009-05-07T20:15:43.697 に答える
0

Slidorion を使えばできるようです。画像スライダーとアコーディオンの組み合わせです。それをチェックしてください、役に立つかもしれません：

http://www.slidorion.com

于 2011-10-26T01:21:22.203 に答える