jqueryアコーディオンのメニューの状態

Question

私は、状態（オープン/クローズ）に基づいて変化するヘッダーイメージを持つアコーディオンメニューを持っています。メニューの任意の部分が開いたらオープン状態のイメージが残っています。メニューが閉じます。メニューの一部が閉じられると閉じた状態が戻ってくるようにしたい。

コード

 $(document).ready(function() { 
     //slides the element with class "menu_body" when paragraph with class 
     //"sidemenu_head" is clicked 
     $("#firstpane p.sidemenu_head").click(function() { 
      $(this).css({backgroundImage:"url(g/down.png)"}) 
        .next("div.sidemenu_body") 
        .slideToggle(300) 
        .siblings("div.sidemenu_body") 
        .slideUp("fast"); 

      $(this).siblings() 
        .css({backgroundImage:"url(left.png)"}); 
    }); 

Answer 1

私はアコーディオンのchangeイベントを使用することをお勧めします。あなたのハンドラは、閉じると開きのアコーディオン項目の両方のヘッダとコンテンツ要素への参照を渡されます。このような

$('#my-accordion').bind('accordionchange', function(event, ui) { 
    ui.oldHeader.css(/* swap bg img */); 
    ui.newHeader.css(/* swap bg img */); 
}); 

Answer 2

何かが欠けている、それを修正

$("#firstpane p.sidemenu_head").click(function() 
{ 
    if ($(this).css("backgroundImage") == "url(g/down.png)") { 
      $(this).css({backgroundImage:"url(g/left.png)"}) 
    } 
    else { 
      $(this).css({backgroundImage:"url(g/down.png)"}) 
    } 
    $(this).next("div.sidemenu_body").slideToggle(300) 
      .siblings("div.sidemenu_body").slideUp("fast"); 
    $(this).siblings().css({backgroundImage:"url(left.png)"}); }); 
}); 

*）は、これは動作するはず行う必要があります。

Answer 3

Jqueryトグルが機能する場合があります。簡単にするために表示/非表示のdivを削除しましたが、簡単に戻すことができます。

$(document).ready(function() 
{ 
    $('#firstpane p.sidemenu_head').toggle(
     function() 
     { 
      $(this).css({ backgroundImage: "url(g/down.png)" }); 

     }, function() 
     { 
      $(this).css({ backgroundImage: "url(g/left.png)" }); 

     }); 
}); 

Answer 4

これは実際には機能しません。ニンジンを変更する別のクリックを作成するだけですが、今度は内容を明らかにするために2回クリックする必要があります（1回はニンジンを変更し、再度公開します）。