Javascript 如何在创建响应性多级菜单时停止e.preventDefault禁用子链接

我正在尝试创建一个响应性的多级菜单，标记的形式如下：

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

---

嗯，你可能需要阻止事件，而不是从整体上，而是从一个角度

$(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');
    });
});

$(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');
    });
});