読者です 読者をやめる 読者になる 読者になる

maroom

茨城のすみっこで文房具にヒャッハー中。主に手帳、ノート、ボールペン、万年筆の使い方や改造について紹介しています。

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>

 

※1

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

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

 

◆イメージ

▼初期状態

f:id:xyuitomarux:20140707164933j:plain


▼#accordion1_menuをオープン

f:id:xyuitomarux:20140707164934j:plain

 

▼更に#accordion2_menuをオープン

f:id:xyuitomarux:20140707164935j:plain


◆注意

#accordion2_menuのjavascript

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

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

 

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