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

【jQueryを使用してのメガメニューの記述】↓
http://oshiete.goo.ne.jp/qa/6618279.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();
  });
});

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

このQ&Aに関連する最新のQ&A

hide」に関するQ&A: firefox4.0でAutohide

A 回答 (1件)

こんにちは。



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

とりあえず、前者と仮定して、以下にサンプルを。
クリックされたら、リスト要素に"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");
 });
});
    • good
    • 0
この回答へのお礼

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

お礼日時:2011/04/14 19:58

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング