jQueryメモ。
ちょっとはまってしまったので、備忘録。


以下のような動作をjQueryで実装しようとしました。
(「>」「<」は実際はbackground-image画像)

【HTML】
<div id="togglebar">
><br>>
</div>
<div id="tdmenu">
メニュー
</div>


【表示(イメージ)】
「>」をクリックするとメニューが非表示、表示が切り替わった後「<」をクリックするとメニューが表示されるようにする。

>│メニュー│
>│メニュー│

↓↑



(「メニュー」非表示、「>」を「<」に変更)

上記を実現するために、以下の処理をjQueryで記述しました。
(1)togglebar をクリックすればtdmenuは非表示・表示切替
(2)togglebar をマウスオーバーで表示を変える
 >の時は≫
 <の時は≪

【(1)の表示切替処理】
以下のとおりだけであれば、うまく処理されます。
(メニューの表示が消える)
$("#togglebar").click(function () {
if($("#tdmenu").css("display")!="none"){
$("#tdmenu").hide();
$(this).css("background-image","url('./menutoggle/allowleft1.png')");
}else{
$("#tdmenu").show();
$(this).css("background-image","url('./menutoggle/allowright1.png')");
}
});



【(2)のマウスオーバー、アウト処理】
これを入れるとうまくメニューの開閉ができなくなりました。

if($("#tdmenu").css("display")!="none"){
$("#togglebar").hover(function(){
$(this).css("background-image", "url('./menutoggle/allowright.png')");
},
function(){
$(this).css("background-image", "url('./menutoggle/allowright1.png')");
});
}else{
$("#togglebar").hover(function(){
$(this).css("background-image", "url('./menutoggle/allowleft.png')");
},
function(){
$(this).css("background-image", "url('./menutoggle/allowleft1.png')");
});
}



tdmenu が表示されているときは画像が切り替わりますが、クリックして tdmenu が表示されなくなっても
「>」が「<」に変わらない、hoverも「>」が「≫」に変わるだけでした。

tdmenu は正しく display : none になっています。
したがって、else 文以下の処理になるはずなのですが……。


しかたないので、hover ではなく、jQueryのmouseoverとmouseoutを利用し、個別に記述しました。

【(2)の修正版】
$("#togglebar").mouseover(function(){
if($("#tdmenu").css("display") == "none"){
$("#togglebar").css("background-image", "url('./menutoggle/allowleft.png')");
} else {
$("#togglebar").css("background-image", "url('./menutoggle/allowright.png')");
}
});

$("#togglebar").mouseout(function(){
if($("#tdmenu").css("display") == "none"){
$("#togglebar").css("background-image", "url('./menutoggle/allowleft1.png')");
} else {
$("#togglebar").css("background-image", "url('./menutoggle/allowright1.png')");
}
});


上記のコードに変更すると、問題なく意図した動作になりました。
しかし、なんでだろう……。