我正在用 javascript 创建一个下拉导航。任何有 child 的列表项我想阻止默认操作并做其他事情。我有这个工作但是当应用默认操作时也适用于子列表项。
这是我的 HTML:
<i id="mobnavtrig" class="fa fa-align-justify fa-2x"></i>
<div class="mobilenav">
<li class="page_item page-item-2"><a href="/">Home</a></li>
<li class="page_item page-item-10"><a href="?page_id=10">Who We Are</a></li>
<li class="page_item page-item-25 page_item_has_children current_page_item parent"><a href="?page_id=25">Case Studies</a>
<ul class='children'>
<li class="page_item page-item-55"><a href="?page_id=55">Barratt Developments</a></li>
<li class="page_item page-item-53"><a href="?page_id=53">Care in Bathing</a></li>
</ul>
</li>
<li class="page_item page-item-27"><a href="?page_id=27">Blog</a></li>
<li class="page_item page-item-29"><a href="?page_id=29">Get In Touch</a></li>
</div>
这是我的 JS:
$( ".mobilenav li.parent" ).click(function(event) {
if($(this).hasClass('page_item_has_children')){
event.preventDefault( );
$(this).addClass('current_page_item');
$(this).find('.children').slideToggle("fast");
}
});
上面有什么我遗漏的吗?
最佳答案
在 child 点击你必须使用 stopPropagation() 停止事件冒泡
$( ".mobilenav li.parent .children" ).click(function(e){
e.stopPropagation();
});
关于javascript preventDefault 仅在父项上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27245600/