我有一个在小屏幕上显示的导航。我的目标是每次单击导航中的锚点标签时隐藏该导航。 到目前为止，我尝试了多种选择，但似乎都没有用。我认为真正的问题是我不知道如何选择菜单中的所有锚点标签。我正在寻找的解决方案必须是纯 JS。提前谢谢您。

<nav id="mySidenav" class="sidenav">
               <a href="#about">About</a>
               <a href="#services" onclick="closeNav();">Services</a>
               <a href="#contact">Contact</a>
</nav>



.sidenav {
          width: 0;
         }
.sidenav.mobile-only {
         width:250px;
                     }

function closeNav() {
   myNav.classList.remove("mobile-only");
 }

选项 1

 var anchorTags = document.querySelectorAll('a')
 anchorTags.addEventListener('click', closeNav(), false);
 ** Uncaught TypeError: anchorTags.addEventListener is not a function

选项 2

 var anchorTags = document.getElementsByTagName("a")
 anchorTags.addEventListener('click', closeNav());
 **Uncaught TypeError: anchorTags.addEventListener is not a function

选项 3

 var anchorTags = document.querySelector("mobile-only a");
    for (var x = 0; x < anchorTags.length; x++) {
        anchorTags[x].addEventListener("click", function() {
            closeNav();
    });
    };

    **Uncaught TypeError: Cannot read property 'length' of null

我发现的唯一解决方案是内联添加函数，但我确信一定有更好的解决方案。

<a href="#about" onclick="closeNav();">About</a>
<a href="#services" onclick="closeNav();">Services</a>
<a href="#contact" onclick="closeNav();">Portofolio</a>

后期编辑： 选项 4：获胜者（有比这更好的解决方案，如下所示。谢谢大家）

var anchorTags = document.getElementById("mySidenav").childNodes;
for (var x = 0; x < anchorTags.length; x++) {
    anchorTags[x].addEventListener("click", function() {
        closeNav();
});
};

感谢大家的回复，我终于明白问题出在哪里了。我尝试了你们所有的解决方案，它们都运行良好。