如何停止e.preventDefault响应创建多级菜单

Question

我想创建一个负责任的多级菜单时，禁止孩子链接，标记为以下形式：

<div id="navigation"> 
     <a href="#" id="toggleNav">Menu <i class="fa fa-angle-down"></i></a> 
     <ul class="nav" id="nav"> 
      <li><a href="/home/" class="">Home</a></li> 
      <li class="has-subnav"><a href="/shop/" class="active ">Shop</a> 
       <ul class=""> 
        <li class="nodesktop"><a href="/shop/" class="">Overview</a></li> 
        <li><a href="/shop/cleanser/" class="">Cleansers</a></li> 
        <li><a href="/shop/moisturiser/" class="">Moisturisers</a></li> 
        <li><a href="/shop/treatment/" class="">Serums &amp; Treatments</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 

这个问题我因为我的subnav链接有一个页面url，我使用e.preventDefault来防止链接被跟踪，并显示我的subnav，然后禁用子链接，所以菜单不起作用。有没有人有这个解决方案？

$(function() { 
    var $toggleNav = $('#toggleNav'), 
     $nav = $('#nav'), 
     $hasSubnav = $nav.find('> .has-subnav'), 
     $window = $(window), 
     windowWidth = $window.width(); 

    $toggleNav.on('click', function (e) { 
     e.preventDefault(); 
     $nav.toggleClass('visible'); 
    }); 

    $hasSubnav.on('click', function (event) { 
     event.preventDefault(); 
     $(this).find('ul').toggleClass('show-subnav'); 
    }); 
}); 

Answer 1

好吧，你可能不阻止对整个<li>控股ul落下事件，但在<a>只。所以，你的JS应该是这样的：

$(function() { 
    var $toggleNav = $('#toggleNav'), 
     $nav = $('#nav'), 
     $hasSubnav = $nav.find('.has-subnav > a'), 
     $window = $(window), 
     windowWidth = $window.width(); 

    $toggleNav.on('click', function (e) { 
     e.preventDefault(); 
     $nav.toggleClass('visible'); 
    }); 

    $hasSubnav.on('click', function (event) { 
     event.preventDefault(); 
     $(this).parent().find('ul').toggleClass('show-subnav'); 
    }); 
}); 

DEMO