【JQuery】アコーディオンの入れ子について

締切済

質問者：sususu-po
質問日時：2012/01/06 01:02
回答数：2件

アコーディオンの入れ子（多階層）について、お教えください。

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がよく分からない為、お教え頂けると大変助かります。
何卒宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： LancerVII
回答日時：2012/01/06 17:02

こんにちは。

可能不可能かに対する回答は実現可能という答えです。

簡単にですが作ってみました。
もっと良い作り方があると思いますので参考程度にお願いします。
(仕事の片手間で作ってみたのでバグ等あったらごめんなさい)

==== sample.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<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. …
<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>