jQuery slideToggleを使った折りたたみメニューの重複

※旧ブログからの記事です。

jQueryを使って折りたたみメニューを作る際に、

「折りたたみメニューの中に別の折りたたみメニューを入れ込みたい」
時のコード。
ほぼ自分のメモ用です。
CSSやCLASS名の追加は省略。

jQuery-2.1.1.min使用。

 

 ◆HTML

◆header

<script src="jquery-2.1.1.min.js"></script>…※1

<!-- accordion1 menu -->
<script>
$(function(){
$("#accordion1_menu dt").on("click", function() {
$(this).next().slideToggle();
});
});
</script>

<!-- accordion2 menu -->
<script>
$(function(){
$("#accordion2_menu dt").on("click", function() {
$(this).next().slideToggle();
});
});
return false;
})
</script>

◆body

<dl id="accordion1_menu">

<dt>メニュー1</dt>
<dd>メニュー1内容（初期値hidden)</dd>
<dt>メニュー2</dt>
<dd>メニュー2内容（初期値hidden)</dd>
<dt>メニュー3</dt>
<dd>メニュー3内容（初期値hidden)</dd>
</dl>

※１

　サーバーUP時はCDN上のjQueryライブラリを使用（高速化）

　（Googleのライブラリ一覧→https://developers.google.com/speed/libraries/devguide?hl=ja#jquery）

◆イメージ

▼初期状態

▼#accordion1_menuをオープン

▼更に#accordion2_menuをオープン

◆注意

#accordion2_menuのjavascriptに

return false;
})
を追加しないと、メニューボタンを押した時に勝手に閉じてしまう。
（開くのは正常だが、開いた直後に勝手に閉じるエラーが出る。）

正直ブログに残すような内容でもないんですが、入れ子のメニューがびよんびよん開閉して「ﾌｧｰｰｰｰｰwwww」となったのでww
そもそも本来は入れ子にしちゃいけないのかもしれないですね(´-ω-`)ｳﾇｩｰ

*追記*
#accordion_menu1にreturn false; })を入れると動かなくなる（メニュー1～3が開かなくなる）ので注意。