サンプルのソースを基にアコーディオンメニューを作成しようとしたのですが、メニューからのリンクに飛びません。
開閉の動作は出来ていますが、<dd>のメニューをクリックしても開閉の動作になってしまったり、どうもうまくいきません。
恐れ入りますがどなたか解決策をご教示願えませんでしょうか。
JS
$(function(){ var $menu = $('.accordion-menu'); var $panel = $menu.find('dd'); var $toggle = $menu.find('a'); $panel.hide(); $toggle.removeClass('is-open').addClass('is-close'); $toggle.click(function(e){ e.preventDefault(); if($(this).hasClass('is-close')) { $(this).parent().nextUntil("dt").slideDown(); $(this).removeClass('is-close').addClass('is-open'); } else { $(this).parent().nextUntil("dt").slideUp(); $(this).removeClass('is-open').addClass('is-close'); } }); });
HTML
<div id="wrapper-a"> <dl class="accordion-menu theme-accordion"> <dt><a href="#"><img src="画像"></a></dt> <dd><a href="リンク先URL">メニュー1</a></dd> <dd><a href="リンク先URL">メニュー2</a></dd> </dl> </div>
CSS
#wrapper-a { margin: 0 auto; width:90%; } .accordion-menu {} .accordion-menu a { display: block; position: relative; text-decoration: none; } .accordion-menu a.is-open::after, .accordion-menu a.is-close::after { position: absolute; top: 50%; right: 10px; margin-top: -8px; font-size: 16px; font-family: FontAwesome; } /* theme */ .theme-accordion a { color: #000; font-size: 16px; color: #01579b; } .theme-accordion dd { border-top: 1px solid #90a4ae; border-bottom: 1px solid #90a4ae; border-left: 1px solid #90a4ae; border-right: 1px solid #90a4ae; } .theme-accordion dd { padding: 10px; }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/25 02:53