如何修复代码以获取使下拉菜单正常工作的功能？

Question

我正在为我的网站创建一个可单击的下拉菜单，但似乎无法使代码的“下拉”部分正常工作。 使用console.log进行测试时，这些功能是完整的。

我不太确定我的代码中缺少什么，以便功能可以执行其应做的事情，即具有菜单下拉菜单。 链接仅出现在下拉按钮下方。 我在下面提供我的代码。 我也有一个CSS样式表。

  <header class="topheader">
      <div id="dropdown">
        <button onclick="myFunction()"id="dropbtn">Menu</button>
        <div id="myDropdown" id="dropdown-content">
          <a href="About Me.html">About Me</a>
          <a href="Featured Works.html">Featured Works</a>
        </div>
      </div>
      <script>

      function myFunction() {
        console.log("test");
       document.getElementById("myDropdown").classList.toggle("show-content");`
      }

      window.onclick = function(event){

        console.log("test");
        if (!event.target.matches('dropbtn')) {
          var dropdowns =
        document.getElementsByClassName("dropdown-content");
            var i;
            for (i = 0; i <
          dropdowns.length; i++) {
              var openDropdown =
          dropdowns[i];
              if (openDropdown.classList.contains("show-content")) {
                openDropdown.classList.remove("show-content")

              }
          }

        }
      }
    </script>
    </header>

Answer 1

检查myDropdown div的ID。

您正在查询document.getElementsByClassName("dropdown-content");

但是根据您的div，您两次设置了ID，我想您是想将类设置为dropdown-content