汉堡包：以 UL 作为锚容器的全屏导航菜单

Question

很长一段时间以来，我一直在为我的网站使用汉堡菜单，全屏导航覆盖绝对定位导航打开是 (css) height=100% and close="0%" .它基于本教程：https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp

如果我使用 DIV 作为 links 的容器，它工作正常：open/close 按钮工作正常，锚点 links 自动获得单击它们时关闭。一切顺利。

考虑到可访问性语义，我会使用 UL 作为容器而不是 DIV，问题就来了。事实证明，只有 UL 上的第一个锚点 link 被关闭 按预期点击，但其他锚点没有。没看懂

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

"The Document method querySelector() returns the first Element within the document that matches the specified selector"

您可以改为使用 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%";
    }
}

汉堡包：以 UL 作为锚容器的全屏导航菜单

Hamburger: Full screen navigation menu with UL as anchor container

html

javascript

css

html-lists