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

Question

WordPress website with Bootstrap menu works fine on desktop but on mobile the dropdown menu links don't do anything. The hamburger button opens and closes the dropdown menu and sub-menus expand properly, so at first glance it looks like it is good, but when you click on a sub-menu item nothing happens. What am I doing wrong?

Here is a slimmed down copy of the generated menu code:

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

You can test it here

Answer 1

It looks like certain list elements are calling a function when clicked:

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

The preventDefault() method stops a link from loading when a link element is clicked. Solution: Simply remove:

e.preventDefault()