时间戳

首页 > 解决方案 > 汉堡包：以 UL 为锚容器的全屏导航菜单

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

问题描述

很长一段时间以来，我一直在为我的网站使用汉堡菜单，一个具有绝对定位的全屏导航覆盖，其中导航打开为 (css) height=100% 并且 close="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%";
}

标签： javascripthtmlcsshtml-lists

解决方案

你可以在这里看到

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

“文档方法 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%";
    }
}

推荐阅读