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

【问题标题】：How to stop sub menu link clicking through and display sub nav如何停止子菜单链接点击并显示子导航
【发布时间】：2017-09-17 17:07:30
【问题描述】：

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

如果链接有子菜单，我如何禁用它，因为子菜单会在父页面加载之前短暂显示。

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

【问题讨论】：

标签： javascript html css navigation submenu

【解决方案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();
   });

【讨论】：

这将阻止子锚点工作。您可以使用$('li ul a').click(function(e) {e.stopImmediatePropagation();}); 解决此问题
我刚回来问那个问题，你已经回答了我的问题，谢谢。