左側のナビゲーション メニューを使用して Web サイトを構築しています。メニューの子要素を非表示にするために JQuery を使用し、HTML アクションを防ぐために親メニュー要素で preventDefault メソッドを使用しています。ただし、これにより、ホームとサインアウトの親メニュー ナビゲーション リンクがブロックされます。HTML 要素 ID または event.Target に基づいて条件付き preventDefault を実行する方法はありますか?
私の JavaScript コード:
$(function() {
var menu_ul = $('.menu > li > ul'),
menu_a = $('.menu > li > a');
menu_ul.hide();
menu_a.click(function(e) {
e.preventDefault();
if(!$(this).hasClass('active')) {
menu_a.removeClass('active');
menu_ul.filter(':visible').slideUp('normal');
$(this).addClass('active').next().stop(true,true).slideDown('normal');
} else {
$(this).removeClass('active');
$(this).next().stop(true,true).slideUp('normal');
}
});
});
私のHTMLコード:
<nav>
<ul class="menu">
<li class="item1"><a href="home.cfm">Home</a></li>
<li class="item2"><a href="#">Parent Menu 2</a>
<ul>
<li class="subitem1"><a href="Page2.cfm">Child Menu 1</a></li>
<li class="subitem2"><a href="Page3.cfm">Child Menu 2</a></li>
</ul>
</li>
<li class="item3"><a href="#">Parent Menu 3</a></li>
<li class="item4"><a href="#">Parent Menu 4</a>
<ul>
<li class="subitem1"><a href="#">Child Menu 1</a></li>
<li class="subitem2"><a href="#">Child Menu 2</a></li>
<li class="subitem3"><a href="#">Child Menu 3</a></li>
</ul>
</li>
<li class="item5"><a href="#">Parent Menu 5</a>
<ul>
<li class="subitem1"><a href="#">Child Menu 1</a></li>
<li class="subitem2"><a href="#">Child Menu 2</a></li>
<li class="subitem3"><a href="#">Child Menu 3</a></li>
</ul>
</li>
<li class="item6"><a href="#signout">Signout</a></li>
</ul>
</nav>
アドバイスをいただければ幸いです。ありがとうございました。