ボタンを押すと開閉するメニュー

質問

以前、こちらでロールオーバーでのメニュー開閉を教えていただいたのですが、
さらにクリックすると出てきたメニューが固定されるようにしたいです。

【jQueryを使用してのメガメニューの記述】↓
http://okwave.jp/qa/q6618279.html

こちらのサイト等、色々と参考にもしてみたのですがうまくいかず…
http://zyco.abz.jp/design/switch_menu/index.shtml
http://zyco.abz.jp/sideways_slide/cd.html

●jQuery↓

$(function(){
　var tli=$("ul#mm-ul > li.mm-li");
　var tdi=$("div.mm-div",tli);

　tli.hover(
　　function(){
　　　tdi.hide();
　　　$(this).children("div.mm-div").fadeIn("fast");
　　},
　　function(){
　　　tdi.hide();
　　});
});

どうしてもわからず、聞いてばかりで本当に申し訳ないのですが、
お力をお貸しください。
どうか宜しくお願いいたします。

回答No.1

fujillin · ベストアンサー

こんにちは。

＞さらにクリックすると出てきたメニューが固定されるようにしたいです。
他の要素にホバーしたときは、固定がキャンセルされるのか、そのまま固定されたままなのか…？
方法としては、クリックされたことを記憶しておいて、その情報を基に判断するようにしてあげればよろしいかと。

とりあえず、前者と仮定して、以下にサンプルを。
クリックされたら、リスト要素に"clicked"のクラスを設定するようにしています。
サンプルでは、2回クリックするとキャンセルされるように、勝手にしていますが、
この動作が不要な場合は、toggleClassのところをaddClassにすればよろしいかと。

（全角空白は半角に）
$(function(){
　var tli=$("ul#mm-ul > li.mm-li");
　var tdi=$("div.mm-div",tli);

　tli.hover(function(){
　　if(!$(this).hasClass("clicked")){
　　　tli.removeClass("clicked");
　　　tdi.hide();
　　　$(this).children("div.mm-div").fadeIn("fast");
　　}
　},
　function(){
　　if(!$(this).hasClass("clicked")) tdi.hide();
　});

　tli.click(function(){
　　$(this).toggleClass("clicked");
　});
});

お礼

今回もご回答くださってありがとうございます！
お礼が遅くなってしまい申し訳ありません。
凄く助かりました！
お礼のお言葉しかできないのが本当に申し訳ないです…。
本当にありがとうございます！！！！