- 2008年9月17日 18:20
- しらべる
アコーディオンメニューを作成するときに、メニューの中にさらにアコーディオンを作りたいときがあったのですが、以外に簡単にできたのでメモします。
作り方は簡単。アコーディオンのヘッダ部分とボディ部分の二つにclass指定して、
タグ構造を入れ子にします。あとはjQueryでスライドさせるだけです。ちなみにjQuery UIのアコーディオンではないです。
JSコード(jQueryを使用しています。)
$(document).ready(function() {
$("div.accordion").hover(function(){
$(this).css("cursor","pointer");
},function(){
$(this).css("cursor","default");
});
$("div.accordion").click(function(){
$(this).next().slideToggle("fast");
});
});
HTMLコード
<div class="accordion"><a href="#">見出し１</a></div>
<div class="bellow">
<div class="accordion"><a href="#">見出し１－１</a></div>
<div class="bellow">
<ul>
<li><a href="#">あああああ</a></li>
</ul>
</div>
<div class="accordion"><a href="#">見出し１－２</a></div>
<div class="bellow">
<ul>
<li><a href="#">いいい</a></li>
<li><a href="#">ううう</a></li>
</ul>
</div>
</div>
<div class="accordion"><a href="#">見出し２</a></div>
<div class="bellow">
<div class="accordion"><a href="#">見出し２－１</a></div>
<div class="bellow">
えええええ
</div>
<div class="accordion"><a href="#">見出し２－２</a></div>
<div class="bellow">
おおおおお
</div>
<div class="accordion"><a href="#">見出し２－３</a></div>
<div class="bellow">
<ul>
<li><a href="#">かかか</a></li>
<li><a href="#">ききき</a></li>
</ul>
</div>
</div>
<div class="accordion"><a href="#">見出し３</a></div>
<div class="bellow">
<ul>
<li><a href="#">くくく</a></li>
<li><a href="#">けけけ</a></li>
</ul>
</div>
サンプル(見出しをクリックすると開閉します)
