- ベストアンサー
jQueryスライドメニューの初歩的な質問です
- jQueryスライドメニューの初歩的な質問です。
- リンク文字をクリックしたときにトグルが実行されてしまうことを修正するための方法を教えてください。
- また、このソースはjQueryを1.7.2以上にすると動作しなくなる原因を知りたいです。
- misoshio
- お礼率78% (30/38)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
なんだかとてもわかりづらいUIのような気もしますが… ご質問のようになさりたければ、 ・li要素をクリックした場合に、クリックの対象がa要素でなければ、その子メニューをトグルで開閉 という感じにすればよいのではないでしょうか。 ただし、a要素をwidth100％にしておきながら、その中をクリックしてもブラウザ側の解釈に頼って処理が分かれているというのは、コードと関係ないところで処理が分岐してしまっていて気に食わないので、明示的にli要素とその子要素のa要素を書き分けるようにしています。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('ul>li').click(function(e){ if(e.target.nodeName==="A") return; $(this).children("ul").slideToggle(); return false; }).children("ul").hide(); }); </script> </head> <body> <ul> <li><span class='tree_a'><a href='http://www.google.co.jp/'>親メニュー1</a></span> <ul> <li><span class='tree_a'><a href='http://www.google.co.jp/'>子メニュー1</a></span> <ul> <li><a href='http://www.google.co.jp/'>孫メニュー1</a></li> </ul> </li> </ul> </li> <li><span class='tree_a'><a href='http://www.google.co.jp/'>親メニュー2</a></span> <ul> <li><span class='tree_a'><a href='http://www.google.co.jp/'>子メニュー2</a></span> <ul> <li><a href='http://www.google.co.jp/'>孫メニュー2</a></li> </ul> </li> </ul> </li> </ul> </body> </html> ＞このソースはjQueryを1.7.2以上にすると動作しなくなってしまいます 当方の環境では、1.7.2にしてみても、旧いIE6でも動作しました。 jQueryのバージョンによってはサポートブラウザの対象が変わったりもしていますが、1.7.1と1.7.2ではあまり違いがなさそうに思います。 リリースノートがこちらにありますので、調べてみてください。 http://blog.jquery.com/2012/03/21/jquery-1-7-2-released/
お礼
ご回答ありがとうございます。 イメージ通りに動作しました。 素人作業ですのでわかりづらいUIになっていますが、自分のスキルではこれ以上のものを作成できないので、これからもっとマシなUIにしていこうと思います。 バージョンの件もご回答ありがとうございました。よく確認してみます。 貴重なお時間をお使いいただき、誠にありがとうございました。