Ссылки меню My Bootstrap работают на мобильных устройствах

Веб-сайт WordPress с меню Bootstrap отлично работает на рабочем столе, но на мобильных устройствах ссылки в раскрывающемся меню ничего не делают. Кнопка гамбургера открывает и закрывает выпадающее меню, а подменю правильно раскрываются, так что на первый взгляд все выглядит хорошо, но при нажатии на элемент подменю ничего не происходит. Что я делаю не так?

Вот уменьшенная копия сгенерированного кода меню:

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

Вы можете протестировать его здесь

javascript wordpress bootstrap-4

22.12.2020 22:19

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

119

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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: Фрагмент кода можно найти в index.php!

— 22.12.2020 22:34

Я удалил код, но теперь ветки меню, имеющие 3 уровня (например, Объявления), не работают. Первый щелчок на переключателе меню открывает меню. Второй щелчок по «Объявлениям» открывает это подменю, но следующий щелчок по элементу с индикатором подменю вызывает ссылку на этот родительский элемент вместо открытия меню 3-го уровня. На самом деле происходит и то, и другое, но навигация происходит до того, как вы сможете просмотреть или щелкнуть элементы 3-го уровня.

— 22.12.2020 23:30

@draney Элемент списка, который открывает подменю третьего уровня, должен быть отключен как ссылка на мобильном устройстве, чтобы работать, потому что невозможно навести курсор на ссылку. Лучший способ решить эту проблему — показать один элемент на мобильном устройстве с отключенной ссылкой, а другой — на рабочем столе. Вы также можете добавить что-то вроде этого: if (window.innerWidth < 768) {document.querySelector(".current_page_ancestor").removeAttr‌ibute("href");}

— 22.12.2020 23:57

ВАУ ВАУ ВАУ! Это исправило это. Спасибо за вашу помощь!!!

— 23.12.2020 00:12

Без проблем! Удачного кодирования!

— 23.12.2020 00:18

22.12.2020 22:30