如果我点击列表项

Question

我有这些代码行，当我点击菜单项时，我无法关闭叠加菜单。有人可以帮忙吗？

<div id="myNav" class="overlay">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <div id="myNav-a" class="overlay-content">
            <a href="#home">Home</a>
            <a href="#projects">Projects</a>
            <a href="#contact">Contact</a>
            <a href="#about">About</a>
        </div>
    </div>

<span class="span-menu" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>

<script>
    function openNav() {
        document.getElementById("myNav").style.width = "100%";
    }

    function closeNav() {
        document.getElementById("myNav").style.width = "0%";
    }
</script>

Answer 1

您可以使用width，而不是使用display。请尝试下面的代码段：

<div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div id="myNav-a" class="overlay-content">
    <a href="#home" onclick="closeNav()">Home</a>
    <a href="#projects" onclick="closeNav()">Projects</a>
    <a href="#contact" onclick="closeNav()">Contact</a>
    <a href="#about" onclick="closeNav()">About</a>
  </div>
</div>

<span class="span-menu" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>

<script>
  function openNav() {
    document.getElementById("myNav").style.display = "block";
  }

  function closeNav() {
    document.getElementById("myNav").style.display = "none";
  }
</script>