JavaScript 单击事件不会改变样式

Question

我正在制作一个切换侧边栏，其中 onClick of button showmenu 功能不起作用。我正在尝试将 sidenav 的样式从 display:none 更改为 display:block 但是当我单击按钮时没有任何反应。我已经尝试使用 alert 并且它有效但不适用于样式。 请帮我看看问题出在哪里？

function showmenu() {
   var sidenav = document.getElementById("sidenav");
   var overdiv = document.getElementById("overlay");
   if (sidenav.style.display == "none") {
      overdiv.style.display = "block";
      sidenav.style.display = "block";                                    
   } else if(sidenav.style.display =="block"){
      sidenav.style.display = "none";
      overdiv.style.display = "none";
   }
}

.sidenav {
    width: 70%;
    height: 85%;
    top: 8%;
    background-color:#ffffff;
    left:0;
    display: none;
    border: 3px solid #77777766;
    overflow-x: hidden;
    transition: 0.5s;
    position: fixed;
    z-index: 5;

}

.overlay{
  position: absolute; 
  margin-top: 13%;
  display: none;
  margin-bottom: 13%;
  width: 100%; 
  height: 100%;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.5); 
  z-index: 2; 
  cursor: pointer;
}

<header>
<button id="menu-div" onclick="showmenu()">Click</button>
        <nav class="sidenav" id="sidenav">
<a class="item" onclick="noDisponible()"><label class="menu-txt">Debate</label><img class="icon" src="images/iconos/megafono.png" /></a>
                <a class="item" onclick="noDisponible()"><label class="menu-txt">Mensajes</label> <img class="icon" src="images/iconos/veterinario.png" /></a>
                <a class="item" onclick="noDisponible()"><label class="menu-txt">Control de Salud</label> <img class="icon" src="images/iconos/corazon.png" /></a>
                <a class="item" href='mapa.html' >Mapas</label> <img class="icon" src="images/iconos/mapas.png" /></a>
                <a class="item" onclick="noDisponible()"><label class="menu-txt">Servicios</label> <img class="icon" src="images/iconos/doctor (1).png" /></a>
                <a class="item" onclick="noDisponible()"><label class="menu-txt">Configuración</label> <img class="icon" src="images/iconos/rueda-dentada.png" /></a>
                <a class="item" id="logout" onclick="logout();"><label class="menu-txt">Cerrar Sesión</label> <img class="icon" src="images/iconos/exit.png" /></a>
</nav>
</header>

<div id="overlay" class="overlay" onclick="overlay()"></div>
    <div id="content">
</div>

Answer 1

您的函数正常工作。只改变这一行。在 nav 标签 style="display: none" 上添加样式并设置默认显示:none 或 block。

<button id="menu-div" onclick="showmenu()">click here</button>
<nav class="sidenav" style="display: none" id="sidenav">