当用户单击“X”或按esc键时，我的导航关闭，我希望当用户单击链接时，它也关闭。nav就是这样构造的；

<div class="top-bar">
        <button class="top-bar__nav-toggle hamburger" id="top-nav-toggle">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <nav class="top-bar__nav collapsed" id="top-bar__nav">
          <ul class="top-bar__nav-list nav-ul">
            <li>
              <a class="navlink" href="#">Home</a>
            </li>
            <li>
              <a class="navlink" href="#Portfolio">Work</a>
            </li>
            <li>
              <a class="navlink" href="#About">About</a>
            </li>
            <li>
              <a class="navlink" href="#Contact">Contact</a>
            </li>
          </ul>
        </nav>
      </div>

是这样的样式；

<div class="top-bar">
        <button class="top-bar__nav-toggle hamburger" id="top-nav-toggle">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <nav class="top-bar__nav collapsed" id="top-bar__nav">
          <ul class="top-bar__nav-list nav-ul">
            <li>
              <a class="navlink" href="#">Home</a>
            </li>
            <li>
              <a class="navlink" href="#Portfolio">Work</a>
            </li>
            <li>
              <a class="navlink" href="#About">About</a>
            </li>
            <li>
              <a class="navlink" href="#Contact">Contact</a>
            </li>
          </ul>
        </nav>
      </div>

及其功能来自此代码；

<div class="top-bar">
        <button class="top-bar__nav-toggle hamburger" id="top-nav-toggle">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <nav class="top-bar__nav collapsed" id="top-bar__nav">
          <ul class="top-bar__nav-list nav-ul">
            <li>
              <a class="navlink" href="#">Home</a>
            </li>
            <li>
              <a class="navlink" href="#Portfolio">Work</a>
            </li>
            <li>
              <a class="navlink" href="#About">About</a>
            </li>
            <li>
              <a class="navlink" href="#Contact">Contact</a>
            </li>
          </ul>
        </nav>
      </div>

我主要是通过教程之类的方法进行构建，我也试图通过这里的类似问题来解决这个问题，但我对此是新手，不知道如何将其翻译成我的代码。欢迎提供任何帮助。

顺晟科技：

使用并运行一个函数为标记添加了单独的事件侦听器，该函数在侦听单击事件时关闭