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

Posted 2023-03-21

【中文标题】我的 Bootstrap 菜单链接正在移动设备上运行

【英文标题】：My Bootstrap menu links are working on mobile

【发布时间】：2021-04-01 14:00:10

【问题描述】：

带有 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   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" ></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

【参考方案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()

【讨论】：

PS：代码sn-p可以在index.php中找到！

我删除了代码，但现在具有 3 个级别的菜单分支（如分类广告）不起作用。第一次单击菜单切换打开菜单。第二次单击“分类广告”会打开该子菜单，但下一次单击带有子菜单指示符的项目会触发指向该父项目的链接，而不是打开第三级菜单。实际上这两种情况都会发生，但导航发生在您有机会查看或单击第 3 级项目之前。

@draney 需要禁用打开第三级子菜单的列表元素作为移动设备上的链接才能工作，因为无法将鼠标悬停在链接上。解决此问题的最佳方法是在移动设备上显示一个禁用链接的元素，并在桌面上显示另一个具有链接的元素。您还可以添加如下内容：if (window.innerWidth < 768) document.querySelector(".current_page_ancestor").removeAttribute("href");

哇哇哇！那解决了它。谢谢你的帮助！！！

没问题！编码愉快！