スポンサーリンク
- サイトにアコーディオンメニューを実装したい！
そんな方々に向けて、アコーディオンメニューの作成法を紹介します。
スポンサーリンク
この記事を読んで作れるもの
この記事では、jQueryを使って、メニューが5つあるアコーディオンメニューを作ります。
「タイトル」を押せば「テキスト」が表示される簡単なつくりです。
簡単なつくりのほうが、使いまわす時に便利かなぁと。
コードの紹介
jQueryはhtmlの中に書きました。CSSは使いまわす時に不便なので使っていません。
今回の創作に関係するところはマーキングしてあります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery</title> </head> <body> <div class="ttl1"> タイトル1 </div> <div class="txt1"> テキスト1 </div> <div class="ttl2"> タイトル2 </div> <div class="txt2"> テキスト2 </div> <div class="ttl3"> タイトル3 </div> <div class="txt3"> テキスト3 </div> <div class="ttl4"> タイトル4 </div> <div class="txt4"> テキスト4 </div> <div class="ttl5"> タイトル5 </div> <div class="txt5"> テキスト5 </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(".ttl1").click(function(){ $(".txt1").slideToggle(); }); $(".ttl2").click(function(){ $(".txt2").slideToggle(); }); $(".ttl3").click(function(){ $(".txt3").slideToggle(); }); $(".ttl4").click(function(){ $(".txt4").slideToggle(); }); $(".ttl5").click(function(){ $(".txt5").slideToggle(); }); </script> </body> </html> |
お役立ちメモ
- 「slideToggle」の「T」は大文字です。「slidetoggle」だと動きません。
- メニューごとにクラス名を変えています（txt1、txt2、…）。同じクラス名にすると、1つのメニューをクリックすることで、全てのメニューが開いてしまいます。
slideToggleが効かないとき（代替案）
原因不明のバグに悩んだときの代替案を紹介します。
bootstrap4のアコーディオンを使う
bootstrap4のコンポーネントを使用しましょう。
下記の参考リンクからソースをコピペできます。
ただし、テンプレートどおりだと、１つのメニューを開けば他のメニューが閉じてしまう仕様になっているので、それが嫌な場合は個別に直す必要があります。
jQueryのif文を使う
jQueryのif文を使う方法もあります。
「タイトル」をクリックしたとき、もし「テキスト」が非表示なら表示させ、非表示なら表示させる
というif文を作ればokです。なんとなく難しそうですが、実際はそうでもないです。
コードの紹介
せっかくなので、こちらのコードも記録します。
「slideToggle」との違いは、メニューごとのクラス名変更がいらないこと。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery</title> </head> <body> <div class="ttl"> タイトル1 </div> <div class="txt"> テキスト1 </div> <div class="ttl"> タイトル2 </div> <div class="txt"> テキスト2 </div> <div class="ttl"> タイトル3 </div> <div class="txt"> テキスト3 </div> <div class="ttl"> タイトル4 </div> <div class="txt"> テキスト4 </div> <div class="ttl"> タイトル5 </div> <div class="txt"> テキスト5 </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".txt").hide(); $(".ttl").on("click",function(){ if ($(this).is(':hidden')) { $(this).next().toggle(); } else { $(this).next().toggle(); } }); }); </script> </body> </html> |
今回のまとめ
いかがでしたでしょうか。
これからも役に立ちそうなスキルを投稿していきますので、よろしくお願いします！
