下記のようなHTML構造のメニューでアコーディオン式のナビメニューを
作りたいのですが、うまくいきません。
parent-menuをクリックした時に
子要素があれば<a>タグのリンクを無効にして子要素を表示し
なければリンク先に移動するようにしたいのですが
jQueryをどのように記述したら良いのでしょうか。
html
1<nav> 2 <ul id="primary-menu"> 3 <li class="parent-menu"><a href="#">Menu1</a></li> 4 <li class="parent-menu"><a href="#">Menu2</a></li> 5 <li class="parent-menu"><a href="#">Menu3</a> 6 <ul class="secondary-menu"> 7 <li><a href="#">Menu3-1</a></li> 8 <li><a href="#">Menu3-2</a></li> 9 <li><a href="#">Menu3-3</a></li> 10 </ul> 11 </li> 12 </ul> 13</nav>
jQuery
1$(function(){ 2 (".parent-menu a").click(function(){ 3 $(this).next('.secondary-menu').slideToggle(); 4 }) 5})
Menu1とMenu2の<a>タグをクリックした時はリンク先へ移動し、
Menu3の<a>タグをクリックした時にはリンクを無効にして
secondary-menuを表示するようにしたいです。
またMenu3-1,Menu3-2,Menu3-3のリンクは有効としたい。
ご教授ください。よろしくお願いします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/09/11 14:53
2017/09/12 00:59
2017/09/12 09:58