如何停止子菜单链接点击并显示子导航

Question

当我点击我的导航链接显示子菜单时，点击到父页面。

如果链接有一个子菜单，如何在父页面加载前短暂显示子菜单，我该如何禁用它。

$(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> 

Answer 1

使用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(); 
    });