アコーディオンメニューについて質問させて頂きます。
レスポンシブでフッターメニューを作っています。
カテゴリAとBは横並び、スマホ時はアコーディオンにします。
下記で見た目はちゃんとできているのですが、
PCの時に、.toggleをクリックするとこちらも開閉するようになってしまっています。
PCの時は.toggleのリンク無効、スマホの時はアコーディオンメニューが効くようにしたいです。
よくある手法なのでやり方はちゃんとあると思うのですが、検索しても希望通りのスタイルが出てこず、困ってしまいました。
プラス、切り替わり時に開閉をリセットしたいです。
もっと無駄なくスマートなやり方があるな気がしますが、とりあえずこのような手法です。
html
1<div class="footer_pcmenu footer_acmenu" id="footer_menu"> 2 3 <ul> 4 5 <li> 6 <a class="toggle" href="index.html">カテゴリA</a> 7 <ul> 8 <li><a href="index.html">リンク1</a></li> 9 <li><a href="index.html">リンク2</a></li> 10 <li><a href="index.html">リンク3</a></li> 11 <li><a href="index.html">リンク4</a></li> 12 </ul> 13 </li> 14 15 <li> 16 <a class="toggle" href="index.html">カテゴリB</a> 17 <ul> 18 <li><a href="index.html">リンク5</a></li> 19 <li><a href="index.html">リンク6</a></li> 20 <li><a href="index.html">リンク7</a></li> 21 <li><a href="index.html">リンク8</a></li> 22 </ul> 23 </li> 24 25 </ul> 26 27</div>
javascript
1// アコーディオンメニュー 2$(function() { 3 function accordion() { 4 $(this).toggleClass("active").next().slideToggle(300); 5 } 6 $(".footer_acmenu .toggle").click(accordion); 7}); 8 9// アコーディオンメニュー クラス入れ替え 10$(window).resize(function(){ 11 //windowの幅をxに代入 12 var x = $(window).width(); 13 //windowの分岐幅をyに代入 14 var y = 769; 15 if (x <= y) { 16 $('#footer_menu').addClass('footer_acmenu'); 17 } else { 18 $('#footer_menu').removeClass('footer_acmenu'); 19 } 20});
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。