У меня есть мобильное меню, которое открывается при нажатии на значок. Большинство ссылок меню ведут на другие страницы, но есть также локальные ссылки с атрибутами href='#xxxx' и идентификаторами той же страницы в качестве цели ссылки.
Открытие и закрытие меню запускается скриптом jQuery, который срабатывает при нажатии на значок (во фрагменте ниже: красный квадрат).
При нажатии на локальную ссылку, ведущую к идентификатору ниже на странице, меню остается открытым, чего не должно быть. Я попытался добавить скрипт для закрытия меню при нажатии любого пункта меню, но селектор в этом скрипте, похоже, не работает.
Вот нерабочая версия — обратите внимание на селектор jQuery, объединяющий селектор атрибутов и одноуровневый селектор с другими. Это только мобильная версия, я исключил все медиа-запросы.
Примечание. Тот же селектор работает и в CSS (последнее правило):
(Кстати: HTML-код меню генерируется Wordpress)
//Переключение мобильного меню при нажатии на значок навигации jQuery('#navicon_1').on('click', function() { jQuery('#main_nav').slideToggle(300); jQuery(this).attr("aria-expanded", function(i, attr) { //изменяем расширенный статус вернуть атрибут === 'истина'? 'false true'; }); }); //закрываем мобильное меню при нажатии на любой значок меню jQuery("#navicon_1[aria-expanded='true'] + #main_nav ul li.menu-item").on('click', function() { //alert("СЕЙЧАС ДОЛЖНО РАБОТАТЬ"); jQuery('#main_nav').hide(); //закрываем меню jQuery('#navicon_1').attr("aria-expanded", function(i, attr) { //изменяем расширенный статус вернуть атрибут === 'истина'? 'false true'; }); }); * { размер коробки: граница-коробка; } #navicon_1 { позиция: абсолютная; справа: 50 пикселей; ширина: 32 пикселей; высота: 32 пикселей; курсор: указатель; дисплей: блок; граница: нет; фон: красный; текстовый отступ: -5000 пикселей; } #main_nav { дисплей: нет; позиция: абсолютная; поле справа: -30 пикселей; верх: 40 пикселей; переполнение-у: авто; справа: 40 пикселей; заполнение: 0 0 0 0; фон: #fff; -webkit-box-shadow: -2px 10px 10px #aeaeae; box-shadow: -2px 10px 10px #aeaeae; } #main_nav>ul { ширина: 230 пикселей; внизу: 0; выравнивание текста: по левому краю; отступы: 8 пикселей 0 8 пикселей 10 пикселей; } #main_nav>ул ли { размер шрифта: 17 пикселей; дисплей: блок; ширина: 100%; высота строки: 1,6; отступы: 4 пикселя 6 пикселей 4 пикселя 8 пикселей; фон: #eee; } #navicon_1[aria-expanded='true']+#main_nav ul li.menu-item { фон: #fb6;
А вот версия, в которой селектор упрощен, без учета атрибутов и одноуровневых селекторов. Это работает: когда вы нажимаете на любой пункт меню, меню закрывается.
Но мне нужно ограничить функцию ситуацией, когда #navicon_1 имеет статус «aria-expanded=true» — в противном случае меню исчезает на рабочем столе при нажатии локальной ссылки: //Переключение мобильного меню при нажатии на значок навигации jQuery('#navicon_1').on('click', function() { jQuery('#main_nav').slideToggle(300); jQuery(this).attr("aria-expanded", function(i, attr) { //изменяем расширенный статус вернуть атрибут === 'истина'? 'false true'; }); }); jQuery("#main_nav ul li.menu-item").on('click', function () { //alert("СЕЙЧАС ДОЛЖНО РАБОТАТЬ"); jQuery('#main_nav').hide();//закрываем меню jQuery('#navicon_1').attr("aria-expanded", function(i, attr) {//изменить расширенный статус вернуть атрибут === 'истина'? 'false true'; }); }); * { размер коробки: граница-коробка; } #navicon_1 { позиция: абсолютная; справа: 50 пикселей; ширина: 32 пикселей; высота: 32 пикселей; курсор: указатель; дисплей: блок; граница: нет; фон: красный; текстовый отступ: -5000 пикселей; } #main_nav { дисплей: нет; позиция: абсолютная; поле справа: -30 пикселей; верх: 40 пикселей; переполнение-у: авто; справа: 40 пикселей; заполнение: 0 0 0 0; фон: #fff; -webkit-box-shadow: -2px 10px 10px #aeaeae; box-shadow: -2px 10px 10px #aeaeae; } #main_nav>ul { ширина: 230 пикселей; внизу: 0; выравнивание текста: по левому краю; отступы: 8 пикселей 0 8 пикселей 10 пикселей; } #main_nav>ул ли { размер шрифта: 17 пикселей; дисплей: блок; ширина: 100%; высота строки: 1,6; отступы: 4 пикселя 6 пикселей 4 пикселя 8 пикселей; фон: #eee; } #navicon_1[aria-expanded='true']+#main_nav ul li.menu-item { фон: #fb6;
- Меню 1
- Меню 2
- Меню 3
- Меню 4
- Меню 5
