单击菜单链接后关闭全屏菜单

Question

我发现了一些类似的问题，但我不知道如何将它们应用于我的案例......

这个全屏菜单可以正常工作，但是当单击链接并指向所选的#id 时，我希望它自行关闭。 有人可以帮助我吗？

<div id="myNav" class="menu">
              <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">open</a>
              <div class="menu-content">
                <a href="#lorem"><h2>lorem</h2></a>
                <a href="#ipsum"><h2>ipsum</h2></a>
                <a href="#dolor"><h2>dolor</h2></a>
              </div>
            </div>
    <span style="cursor:pointer" onclick="openNav()"><ion-icon name="reorder-three-outline">close</span>

这是我正在使用的 .js。

function openNav() {
  document.getElementById("myNav").style.height = "100%";
}

function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}

非常感谢你的帮助！ ♥

Answer 1

首先给<a>元素添加一个通用类

<a class="nav-link" href="#lorem"><h2>lorem</h2></a>
<a class="nav-link" href="#ipsum"><h2>ipsum</h2></a>
<a class="nav-link" href="#dolor"><h2>dolor</h2></a>

然后使用js添加一个事件监听器，当用户点击<a>元素时执行closeNav()函数

let nav_link = document.getElementsByClassName("nav-link");

for (k = 0; k < nav_link.length; k++) {
    nav_link[k].addEventListener("click", function() {
               closeNav();
    });
}