如何修复“页面加载时打开的侧边栏”？

Question

我在做侧栏导航。有一个汉堡包按钮，当点击打开导航。但是当页面被加载时，它已经打开了。我不想它已经打开了。我该怎么解决这个问题？

我是JS的菜鸟。我尝试过href属性中的值'javascript:void(0)‘，但是它没有工作。

<a href="javascript:void(0)" class="click-menu" onclick="openMenu()">&9776;
</a>
<div class="side-menu" id="side-menu">
    <a href="#" class="cross-btn" onclick="closeMenu()" style="font-size: 50px">&times;
    </a>
    <a href="#">Features</a>
    <a href="#">Pricing</a>
    <a href="#">Login</a>
</div>

<script>
    function openMenu() {
      document.getElementById("side-menu").style.width = "250px";
    }
    function closeMenu() {
      document.getElementById("side-menu").style.width = "0";
    }
</script>

预期结果：侧边栏导航只有在点击汉堡图标时才会打开。实际结果：当页面加载时，nav已经打开。

Answer 1

将显示:none添加到div #侧菜单的样式：

<div class="side-menu" id="side-menu" style="display:none;">

与调整#侧菜单的宽度不同，单击菜单时将显示更改为阻止显示，单击交叉标志时更改为none。

function openMenu() {
  document.getElementById("side-menu").style.display = "block";
}

function closeMenu() {
  document.getElementById("side-menu").style.display = "none";
}

完整的代码：

​

<a href="javascript:void(0)" class="click-menu" onclick="openMenu()">&#9776;</a>
<div class="side-menu" id="side-menu" style="display:none;">
  <a href="#" class="cross-btn" onclick="closeMenu()" style="font-size: 50pxl">&times;</a>
  <a href="#">Features</a>
  <a href="#">Pricing</a>
  <a href="#">Login</a>
</div>

<script>
  function openMenu() {
    document.getElementById("side-menu").style.display = "block";
  }
  function closeMenu() {
    document.getElementById("side-menu").style.display = "none";
  }
</script>

​

还将&9776;更改为☰