如何停止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