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>

预期结果：只有在单击“汉堡包”图标时，侧边栏导航才会打开。 实际结果：加载页面后，导航已打开。

Answer 1

将display：none添加到div＃side-menu的样式中：

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

而不是调整＃side-menu的宽度，而是在单击菜单时将显示更改为阻塞，在单击十字符号时将显示更改为无。

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>

P.S。并将&9776;更改为☰

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

1 个答案: