###3階層型のアコーディオンメニューについて
jQuery初心者です。テキストやサイトなどを見て途中まで作ることができましたが、私の自力では解決できそうもなく、質問させて頂きました。
以下のようなアコーディオン型のメニューを作成しているのですが、3階層目の「サブ」項目が「メニュー」項目に収まるようにするには、jQueryのスクリプト部分をどのような記述にすればよいでしょうか。
どうぞよろしくお願い致します。
###発生している問題・エラーメッセージ
エラーメッセージ
###該当のソースコード
$(function(){ $("ul.menu").hide(); $("div.category").click(function(){ $("ul.menu").slideUp(); if($("+ul",this).css("display")=="none"){ $("+ul",this).slideDown(); } }); }); </script>
<style type="text/css"> a { text-decoration: none; } ul.navi{ width:200px; margin:0px; } ul.navi,ul.menu,ul.sub{ margin:0; padding:0; list-style:none; } div.category{ margin-top:5px; height:40px; line-height:40px; background-color:#CCC; cursor::pointer; } ul.menu a{ display:block; height:35px; line-height:35px; color:#164158; cursor::pointer; } </style>
<ul class="navi"> <li> <div class="category"><a href="#">カテゴリー1</a></div> <ul class="menu"> <li><a href="#">メニュー1</a></li> <ul class="sub"> <li><a href="#">サブ1</a></li> <li><a href="#">サブ2</a></li> </ul> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> </ul> </li> <li> <div class="category">カテゴリー2</div> <ul class="menu"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> </ul> </li> </ul>
###試したこと
<ul>と<li>のみを使い、親メニューと子メニューの関係で作ってもみましたが、CSSの処理がうまくできませんでした。 できれば上記の内容で仕上げたいと思っています。###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
回答2件
あなたの回答
tips
プレビュー