Гамбургер: полноэкранное меню навигации с UL в качестве контейнера привязки

Question

В течение долгого времени я использовал меню гамбургера для своего веб-сайта, полноэкранное навигационное наложение с абсолютным позиционированием, где навигация открыта (css), высота = 100% и закрытие = "0%". Он основан на этом уроке: https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp

Работает нормально, если я использую DIV в качестве контейнера для ссылок: кнопки открытия / закрытия отлично работают, а также якорные ссылки, которые автоматически закрыться, когда они нажали. Все хорошо.

Думая о семантике доступности, я бы использовал UL в качестве контейнера вместо DIV, и тут возникает проблема. Оказывается, только первая ссылка привязки в UL закрывается при нажатии, как и ожидалось, но не остальные. Я не понимаю этого.

HTML

<section class="menu">

    <!-- close menu -->
    <button class="menu__close">
        <svg>...</svg>
    </button>

    <ul class="menu__content">
        <li><a href="#seccion-inicio">Inicio</a></li>
        <li><a href="#seccion-muestra">Muestras Web</a></li>
        <li><a href="#seccion-servicio">Servicios Web</a></li>
        <li><a href="#seccion-informacion">Información</a></li>
        <li><a href="#seccion-contacto">Contacto</a></li>
    </ul>
</section>

JS

document.querySelector(".menu__content a").onclick = function() {
    document.querySelector(".menu").style.height = "0%";
}

Answer 1

Здесь вы можете увидеть

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

"Метод Document querySelector () возвращает первый элемент внутри документ, который соответствует указанному селектору "

Вместо этого можно использовать querySelectorAll, а затем выполнить итерацию по коллекции, чтобы прикрепить обработчик кликов, JQuery не требуется.

let myAList = document.querySelectorAll(".menu__content > li > a")
for (var i = 0; i < myAList.length; i++) {
    myAList[i].onclick = function() {
        console.log("Click");
        document.querySelector(".menu").style.height = "0%";
    }
}