前提・実現したいこと
スマホページを作成していて、アコーディオンメニューを設置しようとしています。
発生している問題・エラーメッセージ
アコーディオンメニューとしては、クリックしてサブメニューが出ているので問題ないのですが、
サブメニュー内のリンクを押しても反応がありません。
<a></a>が機能しなくて困っています。
スマホ用には何かコードの追加が必要なのでしょうか?
該当のソースコード
html
1 <ul class="accordion"> 2 <li><div class="menu">カテゴリーをさらに絞り込む<span class="icon"></span></div> 3 <ul class="subMenu"> 4 <li><a href="/smartphone/page2.html">リンク1</a></li> 5 <li><a href="/smartphone/page3.html">リンク2</a></li> 6 <li><a href="/smartphone/page4.html">リンク3</a></li> 7 <li><a href="/smartphone/page5.html">リンク4</a></li> 8 </ul> 9 </li> 10 </ul>
CSS
1.accordion { 2 width: 100%; 3 margin: auto; 4} 5.menu { 6 position: relative; 7 padding: 3% 0 3% 5%; 8 background: #777; 9 color: #fff; 10 list-style: none; 11} 12 13.icon { 14 display: block; 15 position: absolute; 16 top: 0; 17 bottom: 0; 18 right: 20px; 19 width: 10px; 20 height: 2px; 21 margin: auto; 22 background: #fff; 23 content: ""; 24 transition: all 0.3s; 25} 26 27.icon::before { 28 display: block; 29 position: absolute; 30 top: 0; 31 bottom: 0; 32 right: 0; 33 left: 0; 34 width: 2px; 35 height: 10px; 36 margin: auto; 37 background: #fff; 38 content: ""; 39} 40 41.active .icon { 42 -webkit-transform: rotate(-45deg); 43 transform: rotate(-45deg); 44} 45.subMenu { 46 display: none; 47 padding: 3% 0 3% 5%; 48 background: #777; 49} 50.subMenu li { 51 padding: 2% 0; 52 color: #fff; 53 overflow:wrap; 54} 55 56.subMenu li a{ 57 color:#fff; 58}
Java
1 2$(function() { 3 $('.accordion li').click(function() { 4 $(this) 5 .children('.subMenu').slideToggle(); 6 7 if ($(this).children('.menu').hasClass('active')) { 8 $(this).children('.menu').removeClass('active'); 9 } else { 10 $(this).children(".menu").addClass("active"); 11 } 12 13 return false; 14 }); 15});
試したこと
補足情報(FW/ツールのバージョンなど)
回答1件
あなたの回答
tips
プレビュー