我的 Bootstrap 菜单链接正在移动设备上运行

Question

带有 Bootstrap 菜单的 WordPress 网站在桌面上运行良好，但在移动设备上，下拉菜单链接不起作用。汉堡按钮打开和关闭下拉菜单，子菜单正常展开，所以乍一看它看起来不错，但是当你点击一个子菜单项时，什么也没有发生。我做错了什么？

这是生成的菜单代码的精简副本：

<nav id="site-navigation" class="main-navigation navbar navbar-expand-lg" role="navigation">
    <div class="container">
        <div class="skip-link"><a class="screen-reader-text" href="#content">Skip to content</a></div>
        <div id="mobile-header" class="site-header clearfix" role="banner">
            <div class="flex">
                <div class="brand">
                    <a href="/"><img  alt="The Aha! Connection" data-src="https://www.website.com/wp-content/themes/aha%213.0/img/AHA-mobile-logo.png" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img src="https://www.website.com/wp-content/themes/aha%213.0/img/AHA-mobile-logo.png" alt="The Aha! Connection"></noscript></a>
                </div>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="btn-txt">MENU</span>
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
        </div>
        <div id="bs-navbar" class="collapse navbar-collapse justify-content-md-center">
            <ul id="menu-menu" class="navbar-nav mr-auto" itemscope itemtype="http://www.schema.org/SiteNavigationElement">
                <li  id="menu-item-111922" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children dropdown menu-item-111922 nav-item"><a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-111922"><span itemprop="name">Aha! Originals</span></a>
                    <ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-111922">
                        <li  id="menu-item-111924" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-111924 nav-item"><a itemprop="url" href="https://www.website.com/category/originals/audra-originals/" class="dropdown-item"><span itemprop="name">Audra Originals</span></a></li>
                        <li  id="menu-item-111925" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-111925 nav-item"><a itemprop="url" href="https://www.website.com/category/originals/audras-fitness-blog/" class="dropdown-item"><span itemprop="name">Audra&#8217;s Fitness Blog</span></a></li>
                        <li  id="menu-item-111923" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-111923 nav-item"><a itemprop="url" href="https://www.website.com/category/originals/ask-tatiana/" class="dropdown-item"><span itemprop="name">Ask Tatiana</span></a></li>
                    </ul>
                </li>
                <li  id="menu-item-54638" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-54638 nav-item"><a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-54638"><span itemprop="name">Businesses</span></a>
                    <ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-54638">
                        <li  id="menu-item-232" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-232 nav-item"><a itemprop="url" href="https://www.website.com/category/advertisements/" class="dropdown-item"><span itemprop="name">Advertisements</span></a></li>
                        <li  id="menu-item-9172" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9172 nav-item"><a itemprop="url" href="https://www.website.com/category/deals/" class="dropdown-item"><span itemprop="name">Deals / Specials</span></a></li>
                        <li  id="menu-item-57748" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57748 nav-item"><a itemprop="url" href="https://www.website.com/directory/" class="dropdown-item"><span itemprop="name">Directory</span></a></li>
                        <li  id="menu-item-111933" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-111933 nav-item"><a itemprop="url" href="https://www.website.com/category/business/giveaways/" class="dropdown-item"><span itemprop="name">Giveaways</span></a></li>
                        <li  id="menu-item-9178" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9178 nav-item"><a itemprop="url" href="https://www.website.com/category/recommendations/" class="dropdown-item"><span itemprop="name">Recommendations</span></a></li>
                        <li  id="menu-item-57788" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57788 nav-item"><a itemprop="url" href="https://www.website.com/advertising-directory-recommendations/" class="dropdown-item"><span itemprop="name">Submit A Business Listing</span></a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

你可以test it here

Answer 1

看起来某些列表元素在单击时正在调用函数：

function(e) {
  e.preventDefault();
  if ($(this).next('.dropdown-menu li > .dropdown-menu').length) {
    $(this).next('.dropdown-menu li > .dropdown-menu').toggle();
  }
  $('.dropdown').on('hide.bs.dropdown', function() {
    $(this).find('.dropdown-menu li > .dropdown-menu').hide();
  })
}

preventDefault() 方法会在单击链接元素时停止加载链接。 解决方案：只需删除：

e.preventDefault()