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

您的功能正常。只改变这一行。在 导航标签 style="display: none" 上添加样式并设置默认显示：none 或块。

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

Answer 2

您需要从 CSS 类中删除 display:none。

但实际上，您在这里采用了错误的方法。您的 CSS 和 JavaScript 应该与您的 HTML.

分开

请参阅下面的内联评论：

// Don't use inline HTML event atributes, like onclick.
// Do all your event/JavaScript work separately in JavaScript

// Get all the DOM references you'll use just once,
// not every time your functions run
var btnMenu = document.getElementById("menu-div");
var sideNav = document.getElementById("sidenav");
var overDiv = document.getElementById("overlay");

btnMenu.addEventListener("click", showMenu);
overDiv.addEventListener("click", overlay);

// Set up event handling on the sideNav and let all
// the events triggered from within it bubble up to it
sideNav.addEventListener("click", noDisponible);

function showMenu() {
  // Just toggle the usage of the pre-made hidden class
  sideNav.classList.toggle("hidden");
  overDiv.classList.toggle("hidden");
  console.log("function showMenu called");
}

function noDisponible(event){
  // Make sure it was the right type of sideNave item
  if(event.target.classList.contains("noDisponible")){
    // Do work here
    console.log("function noDisponible called");
  } else if(event.target.classList.contains("logout")){
    // Do logout here
    logout();
  }
}

function overlay(event){
  // Do work here
  console.log("function overlay called");
}

function logout(event){
  console.log("function logout called");
}

.hidden { display:none; }

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

}

.overlay{
  position: absolute; 
  margin-top: 13%;
  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 type="button" id="menu-div"></button>
  <nav class="sidenav hidden" id="sidenav">
    <a class="item noDisponible">
      <label class="menu-txt">Debate</label>
      <img class="icon" src="images/iconos/megafono.png">
    </a>
    <a class="item noDisponible">
      <label class="menu-txt">Mensajes</label> 
      <img class="icon" src="images/iconos/veterinario.png">
    </a>
    <a class="item noDisponible">
      <label class="menu-txt">Control de Salud</label> 
      <img class="icon" src="images/iconos/corazon.png">
    </a>
    <a class="item noDisponible" href='mapa.html'>
      <label class="menu-txt">Mapas</label> <!--You were missing the opening label tag here -->
      <img class="icon" src="images/iconos/mapas.png">
    </a>
    <a class="item noDisponible">
      <label class="menu-txt">Servicios</label> 
      <img class="icon" src="images/iconos/doctor (1).png">
    </a>
    <a class="item noDisponible">
      <label class="menu-txt">Configuración</label> 
      <img class="icon" src="images/iconos/rueda-dentada.png">
    </a>
    <a class="item logout" id="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 hidden">OVERLAY HERE</div>
<div id="content"></div>

Answer 3

在函数之外以编程方式设置 sidenav 的样式：

let sidenav = document.getElementById("sidenav");
sidenav.style.display = "none";

function showmenu() {
  let 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;
  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'>
      <label class="menu-txt">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()">Overlay</div>
<div id="content">Content</div>

Answer 4

您需要使用 window.getComputedStyle 来获取 css 属性，而不是 element.style。

Element.style 仅提供提供的内联样式，但 window.getComputedStyle 将为您提供提供给元素的最终样式。 element.style 只会给你内联样式，这就是为什么要让它工作，你需要按照 @BCM 的建议添加内联样式 display: none。

你可以阅读更多

function showmenu() {
   var sidenav = document.getElementById("sidenav");
   var overdiv = document.getElementById("overlay");
   if (window.getComputedStyle(sidenav).display == "none") {
      overdiv.style.display = "block";
      sidenav.style.display = "block";                                    
   } else if(window.getComputedStyle(sidenav).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>

此外，对于编写此类代码，您应该遵循@Scott Marcus 的方法。它更好更干净。

JavaScript 点击事件没有改变样式

JavaScript click event is not changing the style

html

javascript

css

sidebar