- 締切済み
【JQuery】アコーディオンの入れ子について
アコーディオンの入れ子（多階層）について、お教えください。 JQueryで入れ子のアコーディオンメニューを作成したいと思っています。 入れ子の数は計3つを予定してます。（第3階層まで） 1～3つ目それぞれのメニューは増減する可能性がある為、出来るだけ数字で割り振ったIDなどは使用せずに表現したいと思っています。（メニューを増やす度にIDが増えるのを止めたい） ■HTMLソース例 <ul class="navi"> <li>第1階層 <ul class="navi-sub"> <li>第2階層 <ul class="navi-sub2"> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> </ul> </li> <li>第2階層 <ul class="navi-sub2"> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> </ul> </li> </ul> </li> </ul> 上記のようなHTMLソースで入れ子のアコーディオンを作成することは可能でしょうか？ （ID、CLASSのセレクタの振り方は上記以外でもかまいません） また、最初からアコーディオンメニューの1部分だけ展開した状態にする事は可能なのでしょうか？ （上の質問にも言える事ですが、JavaScriptにこだわっている訳ではないので、CSSでも表現が可能であればCSSでも構いません） JavaScriptがよく分からない為、お教え頂けると大変助かります。 何卒宜しくお願い致します。
- sususu-po
- お礼率60% (3/5)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 可能不可能かに対する回答は実現可能という答えです。 簡単にですが作ってみました。 もっと良い作り方があると思いますので参考程度にお願いします。 (仕事の片手間で作ってみたのでバグ等あったらごめんなさい) ==== sample.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>【JQuery】アコーディオンの入れ子について</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $().ready ( function () { var navi = $('.navi'); var pms1 = { height:'toggle',opacity:'toggle'}; navi.each ( function(index) { $('li > a', this).each ( function(index) { var obj = $(this); // .defの設定してある部分は開いておく if ( !obj.parent().is('.def') ) obj.next().hide(); obj.addClass('link'); if ( obj.parent().is('.sub') ) { // 親が.subクラスについてはlinkクラスを削除 obj.removeClass('link'); obj.click ( function() { // アニメーションで開くまたは閉じる // 現在表示されているものを選択し閉じる obj.next().animate(pms1).parent().siblings().children('ul:visible').animate(pms1); }); } }); }); navi.find('> .sub').each ( function(index) { $(this).find(' > a').click( function() { navi.find('ul.menu').animate ( {height:'hide',opacity:'hide'} ); }); }); }); </script> <style type="text/css"> ul.navi { width:300px; } ul.navi , ul.navi li ul { maring:0; padding:0; list-style:none; } ul.navi a { display:block; height:30px; line-height:30px; text-decoration:none; text-align:center; font-weight:bold; color:#ccc; } ul.navi { background-color:#000; } ul.navi a:hover { color:#fff; } ul.navi ul li { background-color:#333; } ul.navi li ul a:hover { color:#fff; } .link { background-color:#999; } </style> </head> <body> <ul class="navi"> <li class="sub"><a href="#">第1階層(1)</a> <ul> <li class="sub"><a href="#">第2階層(1-1)</a> <ul class="menu"> <li><a href="./1-1-1.html">第3階層(1-1-1)</a></li> <li><a href="./1-1-2.html">第3階層(1-1-2)</a></li> <li><a href="./1-1-3.html">第3階層(1-1-3)</a></li> </ul> </li> <li class="sub"><a href="#">第2階層(1-2)</a> <ul class="menu"> <li><a href="./1-2-1.html">第3階層(1-2-1)</a></li> <li><a href="./1-2-2.html">第3階層(1-2-2)</a></li> <li><a href="./1-2-3.html">第3階層(1-2-3)</a></li> </ul> </li> </ul> </li> <li class="sub def"><a href="#">第1階層(2)</a> <ul> <li class="sub"><a href="#">第2階層(2-1) Default Open</a> <ul class="menu"> <li><a href="#">第3階層(2-1-1)</a></li> <li><a href="#">第3階層(2-1-2)</a></li> </ul> </li> </ul> </li> <li class="sub"><a href="#">第1階層(3)</a> <ul> <li class="sub"><a href="#">第2階層(3-1)</a> <ul class="menu"> <li><a href="./3-1-1.html">第3階層(3-1-1)</a></li> <li><a href="./3-1-2.html">第3階層(3-1-2)</a></li> <li><a href="./3-1-3.html">第3階層(3-1-3)</a></li> </ul> </li> <li class="sub"><a href="#">第2階層(3-2)</a> <ul class="menu"> <li><a href="./3-2-1.html">第3階層(3-2-1)</a></li> <li><a href="./3-2-2.html">第3階層(3-2-2)</a></li> <li><a href="./3-2-3.html">第3階層(3-2-3)</a></li> <li><a href="./3-2-4.html">第3階層(3-2-4)</a></li> <li><a href="./3-2-5.html">第3階層(3-2-5)</a></li> <li><a href="./3-2-6.html">第3階層(3-2-6)</a></li> </ul> </li> <li class="sub"><a href="#">第2階層(3-3)</a> <ul class="menu"> <li><a href="./3-2-1.html">第3階層(3-3-1)</a></li> <li><a href="./3-2-2.html">第3階層(3-3-2)</a></li> <li><a href="./3-2-3.html">第3階層(3-3-3)</a></li> </ul> </li> </ul> </li> </ul> </body> </html>
- fujillin
- ベストアンサー率61% (1594/2576)
普通に考えれば必要なidはトップのnaviだけですむのではないでしょうか？ ナビゲーション関連は皆が考えているので、ちょっとでも探す気があればゴマンと見つかると思いますが？ 以下、ごく一例（内容は見ていませんが） ＜ＣＳＳ関連＞ http://www.red-team-design.com/css3-dropdown-menu http://www.cssplay.co.uk/menus/skeleton2.html ＜javascript関連＞ http://onehackoranother.com/projects/jquery/droppy/ http://codepress.ru/jquery/amenu/ http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/ http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm http://www.designchemical.com/lab/demo-wordpress-vertical-accordion-menu-plugin/
