汉堡。以UL为锚容器的全屏导航菜单。

Question

长久以来，我一直在我的网站上使用一个汉堡包菜单，一个全屏导航叠加的绝对定位，其中导航打开是(css) height=100%，关闭="0%"。它是基于这个教程。https:/www.w3schools.comhowtohowto_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.orgen-USdocsWebAPIDocumentquerySelector。

"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%";
    }
}