При переходе по якорям меню не закрывается использую wordpress может кто то сталкивался?
Подскажите пожалуйста может кто сталкивался. При клике на пункт меню с якорями меню не закрывается. Есть меню с якорями на мобильной версии которое открывается на пол экрана. Кнопка button с классом "menu-toggle" при нажатии открывает меню ul с классом "nav-menu" и там список li c классом "menu-item" в каждом li ссылка с якорями. Как сделать так чтобы при нажатии на якорь и переходе к соответствующему блоку меню скрывалось. так как сейчас оно не закрывается и занимает пол экрана
<nav id="site-navigation" class="main-navigation toggled"> <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="true">Меню</button> <div class="menu-menu-1-container"> <ul id="primary-menu" class="menu nav-menu"> <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-9 current_page_item menu-item-15"><a href="https://2a655070a20.spectrum.myjino.ru/" aria-current="page">Главная</a></li> <li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16"><a href="#school-link">О школе</a></li> <li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17"><a href="#classes-link">Форма занятий</a></li> <li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18"><a href="#offline-classes-link">Занятия офлайн</a></li> <li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19"><a href="#reviews-link">Отзывы</a></li> <li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20"><a href="#contacts-link">Контакты</a></li> </ul> </div> </nav> |
<nav id="site-navigation" class="main-navigation toggled"> <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="true">Меню</button> <div class="menu-menu-1-container"> <ul id="primary-menu" class="menu nav-menu"> <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-9 current_page_item menu-item-15"><a href="https://2a655070a20.spectrum.myjino.ru/" aria-current="page">Главная</a></li> <li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16"><a href="#school-link">О школе</a></li> <li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17"><a href="#classes-link">Форма занятий</a></li> <li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18"><a href="#offline-classes-link">Занятия офлайн</a></li> <li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19"><a href="#reviews-link">Отзывы</a></li> <li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20"><a href="#contacts-link">Контакты</a></li> </ul> </div> </nav>
Дополнительно:
Я так понял что это нормально, так как нет перезагрузки страницы. но может кто то знает как прописать какой нибудь скрипт в футер чтобы считывать нажатие и закрывать меню после нажатия. Я вообще не понимаю как это можно сделать но думаю кто то в этой вселенной по любому уже с этим сталкивался. Я был бы признателен!
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Это нормальное поведение для якорных ссылок: страница не перезагружается, браузер просто прокручивает документ к блоку с нужным id. Поэтому WordPress и тема не всегда автоматически закрывают мобильное меню после клика. Нужно добавить обработчик, который при клике по ссылке с якорем внутри навигации убирает класс открытого состояния и переводит кнопку меню обратно в закрытое состояние.
В вашем HTML открытое меню видно по классу toggled на nav с id site-navigation, а кнопка хранит состояние в aria-expanded. Значит при клике надо убрать toggled у контейнера меню и поставить aria-expanded в false. Делать это лучше не через inline-скрипт в записи, а через JS-файл темы или через небольшой фрагмент, подключенный в дочерней теме.
document.addEventListener('DOMContentLoaded', function () { const nav = document.querySelector('#site-navigation'); if (!nav) { return; } const button = nav.querySelector('.menu-toggle'); const menu = nav.querySelector('.nav-menu'); nav.addEventListener('click', function (event) { const link = event.target.closest('a'); if (!link || !link.hash) { return; } nav.classList.remove('toggled'); if (menu) { menu.classList.remove('toggled'); } if (button) { button.setAttribute('aria-expanded', 'false'); } }); });document.addEventListener('DOMContentLoaded', function () { const nav = document.querySelector('#site-navigation'); if (!nav) { return; } const button = nav.querySelector('.menu-toggle'); const menu = nav.querySelector('.nav-menu'); nav.addEventListener('click', function (event) { const link = event.target.closest('a'); if (!link || !link.hash) { return; } nav.classList.remove('toggled'); if (menu) { menu.classList.remove('toggled'); } if (button) { button.setAttribute('aria-expanded', 'false'); } }); });
Такой вариант сработает для ссылок вида #school-link, #reviews-link и похожих пунктов. Если в меню есть ссылки на другие страницы, у которых тоже есть hash, например /about/#contacts, можно оставить проверку link.hash: меню закроется после клика, а браузер дальше выполнит переход сам. Если нужно закрывать меню только для якорей текущей страницы, дополнительно сравните адрес ссылки без hash с текущим адресом страницы.
После добавления скрипта проверьте мобильную ширину: открыть меню, нажать каждый якорный пункт, убедиться, что меню закрывается, страница прокручивается к нужному блоку, а повторное открытие меню работает без второго лишнего клика. Если используется кэш или минификация JS, очистите кэш, иначе старый файл может продолжать отдаваться браузеру.