[英]How to stop sub menu link clicking through and display sub nav
当我单击我的导航链接以显示子菜单时,它会单击进入父页面。
如果链接具有子菜单,我如何才能禁用它,因为该子菜单在加载父页面之前会短暂显示。
$(function(){
//Hide all the sub menus
$('.sub-menu').hide();
$("li:has(ul)").click(function(){
//Find the child ul and slideToggle
$(this).children("ul").slideToggle();
});
});
<div class="main-nav navbar-right"><ul id="menu-main-navigation" class="main-nav-ul"><li id="menu-item-46" class="dropdown menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-46"><a href="http://www.chris-whiting.co.uk/development/">Home</a></li>
<li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="http://www.chris-whiting.co.uk/development/about/">About</a></li>
<li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-78 current_page_item menu-item-has-children menu-item-82"><a href="http://www.chris-whiting.co.uk/development/services/">Services</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"><a href="http://www.chris-whiting.co.uk/development/services/service-one/">Service One</a></li>
</ul>
</li>
<li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67"><a href="http://www.chris-whiting.co.uk/development/contact/">Contact</a></li>
</ul></div>
使用preventDefault()
:
$("li:has(ul)").click(function(e){ // pass the click event to the function
e.preventDefault(); // Stop the link from following
//Find the child ul and slideToggle
$(this).children("ul").slideToggle();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.