如何停止 e.prevent默认在创建响应式多级菜单时禁用子链接

How to stop e.preventDefault disabling child links when creating responsive multi-level menu

本文关键字：菜单 多级 链接 响应 何停止 prevent 默认 创建      更新时间：2023-09-26

我正在尝试创建一个响应式多级菜单，标记采用以下形式：

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

我遇到的问题是，因为我的子导航链接有一个页面网址，所以我使用 e.preventDefault 来防止链接被跟踪，并显示我的子导航，然后也会禁用子链接，所以菜单不起作用。有人对此有解决方案吗？

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

好吧，您可能必须阻止事件，而不是在整个<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');
    });
});

演示

相关文章：