シンプルなアコーディオンメニューのコードです。
事前に jQuery を読込んでおく必要があります。
|
1 2 3 4 5 6 7 8 9 |
<script> $(function(){ $("メニューのセレクタ").on("click", function() { $(this).next().slideToggle(); $(this).children("対象のセレクタ").toggleClass("open"); }); }); </script> |
５行目は「メニューのセレクタ」内にある「対象のセレクタ」に「open」というクラスを追加しています。
５行目は無くてもアコーディオン自体は動きます。
サンプルソースを以下に記載します。
|
1 2 3 4 5 6 |
<dl id="menu"> <dt>タイトル１</dt> <dd>内容１</dd> <dt>タイトル２</dt> <dd>内容２</dd> </dl> |
|
1 2 3 4 5 6 7 |
<script> $(function(){ $("#menu dt").on("click", function(){ $(this).next().slideToggle(); }); }); </script> |