jQuery 在移动导航上使用 slideToggle 时链接断开

Question

我正在我的 WordPress 网站上制作移动导航菜单。我成功地创建了下拉菜单并且滑动切换工作正常但在子菜单中 links 被破坏了。当您单击它们时，什么也没有发生。在检查器中它有正确的 link 参考，但不会继续点击。在桌面上，links 工作正常。

下面是我的jQuery:

jQuery('#menu-main-menu-1 > .menu-item-has-children > .sub-menu').addClass('first-sub');
    jQuery('#menu-main-menu-1 .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu').addClass('last-sub');

    jQuery('#menu-main-menu-1 > .menu-item-has-children a').click(function(){
        jQuery(this).siblings('.first-sub').slideToggle();
        return false;
    });

    jQuery('#menu-main-menu-1 > .menu-item-has-children > .first-sub > .menu-item-has-children a').click(function(){
        jQuery(this).siblings('.last-sub').slideToggle();
        return false;
    });

下面是我的 HTML 代码：

<?php wp_nav_menu( array('menu' => 'Main Menu' )); ?>

转换为具有以下结构的 HTML 菜单：

<ul id="menu-main-menu-1" class="menu">
        <li class="menu-item"><a href="link1">page1</a></li>
        <li class="menu-item menu-item-has-children"><a href="#">dropdown1</a>
            <ul class="sub-menu first-sub">
                <li class="menu-item"><a href="link2">page2</a></li>
                <li class="menu-item"><a href="link3">page3</a></li>
                <li class="menu-item"><a href="link4">page4</a></li>
            </ul>
        </li>
        <li class="menu-item"><a href="link5">page5</a></li>
        <li class="menu-item"><a href="link6">page6</a></li>
</ul>

Answer 1

我在 Karl-André Gagnon 的帮助下找到了解决方案。我所要做的就是删除“return false”。

jQuery 在移动导航上使用 slideToggle 时链接断开

jQuery breaks links when using slideToggle on mobile nav

html

wordpress

mobile

jquery

slidetoggle