Отключить переходы по пунктам меню на мобильных

Раньше это делали через $(document).delegate('a', 'click', ...) и проверку видимости бургер-кнопки. Приём рабочий, но у него три слабых места: зависимость от jQuery, определение «мобильности» по видимости элемента вместо реального размера экрана и полное отсутствие доступности – скринридер не понимает, что пункт стал кнопкой-раскрывашкой. Сегодня всё это решается на чистом JavaScript.

Навешиваем один обработчик на контейнер меню (делегирование событий) и отменяем переход только для пунктов, у которых есть подменю, и только в мобильном режиме:

const menu = document.querySelector("#main-menu");

menu.addEventListener("click", (e) => {
    const link = e.target.closest("a.has-submenu");
    if (!link) return;

    if (mobile.matches) {
        e.preventDefault();               // отменяем переход
        const item = link.parentElement;
        const expanded = item.classList.toggle("is-open");
        link.setAttribute("aria-expanded", expanded);
    }
});

Обратите внимание: отмену перехода получают только пункты с классом has-submenu. Обычные ссылки без вложенного меню продолжают работать как ссылки – это важно, иначе на мобильных перестанет работать вся навигация.

Если пункт на мобильных перестаёт быть ссылкой и становится переключателем, об этом нужно сообщить вспомогательным технологиям:

• Добавляйте aria-expanded="false" на пункты с подменю и переключайте значение при раскрытии (в коде выше это уже сделано).
• Оборачивайте меню в <nav aria-label="Основное меню">.
• Убедитесь, что подменю раскрывается и с клавиатуры: событие click срабатывает и по Enter на ссылке, так что базовый кейс закрыт, но проверьте порядок фокуса.
• Не прячьте у родителя реальную ссылку насовсем – оставьте пользователю способ попасть на страницу раздела (например, отдельной ссылкой «Перейти в раздел» внутри раскрытого подменю).