При переходе по якорям меню не закрывается использую wordpress может кто то сталкивался?

Ссылка скопирована
1 ответ

Подскажите пожалуйста может кто сталкивался. При клике на пункт меню с якорями меню не закрывается. Есть меню с якорями на мобильной версии которое открывается на пол экрана. Кнопка 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>

Дополнительно:

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

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
WordPress-редакция Ответ

Это нормальное поведение для якорных ссылок: страница не перезагружается, браузер просто прокручивает документ к блоку с нужным 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 с текущим адресом страницы.

  • Если тема открывает меню не классом toggled, замените его на фактический класс открытого состояния. Его проще всего увидеть в DevTools: откройте меню и посмотрите, какой класс добавился к nav, ul или wrapper.
  • Если у body при открытии меню появляется отдельный класс вроде menu-open или locked, его тоже нужно удалить в этом обработчике.
  • Если после клика меню визуально скрывается, но кнопка остается в состоянии открыто, проверьте именно aria-expanded. Для доступности и корректной работы повторного клика он должен становиться false.

После добавления скрипта проверьте мобильную ширину: открыть меню, нажать каждый якорный пункт, убедиться, что меню закрывается, страница прокручивается к нужному блоку, а повторное открытие меню работает без второго лишнего клика. Если используется кэш или минификация JS, очистите кэш, иначе старый файл может продолжать отдаваться браузеру.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно