为什么我的开关语句只运行一次

所以我希望我的switch语句在单击按钮时检查导航栏的"宽度"，然后采取相应的行动。但它只检查第一种情况并运行该代码。

第一次点击时：检查宽度是否等于 0px。将宽度更改为 100%。(这很好(。

第二次点击时：检查宽度是否等于 100%。将宽度更改为 0px。(它不这样做(。

我知道这可能相当简单，但我仍然是 JavaScript 的新手，所以任何帮助将不胜感激。

    var bttn = document.getElementById('navRevealBttn');
    bttn.addEventListener('click', function(){
    var nav = document.getElementById('navBar');
    var style = getComputedStyle(nav);
    var width = style.width;
    switch (width) {
      case '0px': 
        IsIt1();
        break;
      case '500px' : 
        IsIt2();
        break;
    }
    });
    function IsIt1() {
      navBar.style.width = '500px';
      navBar.style.height = 'auto';
      navUl.style.fontSize = '25px'; 
    }
    function IsIt2() {
      navBar.style.width = '0px';
      navBar.style.height = '0';
      navUl.style.fontSize = '0px'; 
    }

JSFiddle： https://jsfiddle.net/DylanT17/hk51woe4/2/

代码中的问题是 navBar 在按钮上添加了覆盖层，这不允许你触发点击事件。

var bttn = document.getElementById('navRevealBttn');
bttn.addEventListener('click', function(){ 
var nav = document.getElementById('navBar');
var style = getComputedStyle(nav);
var width = style.width;console.log(width)
switch (width) {
  case '0px': 
    IsIt1();
    break;
    
  case '500px' : 
    IsIt2();
    break;
}
},false);
function IsIt1() {
  navBar.style.width = '500px';
  navBar.style.height = 'auto';
  navUl.style.fontSize = '25px';   
  navBar.style.marginTop = '100px'; 
}
function IsIt2() {
  navBar.style.width = '0px';
  navBar.style.height = '0';
  navUl.style.fontSize = '0px';   
  navBar.style.marginTop = '100px'; 
}

body {
  margin: 0 auto;
}
#navBar {
  width: 0px;
  height: 0;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  margin: 0 auto;
}
#navRevealBttn {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 1);
}
#navUl {
  list-style: none;
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 20px;
  height: auto;
  border: 2px solid black;
  font-size: 0px;
}

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    
    <article id="navRevealBttn"></article>
    <div id="navBar">
      <ul id="navUl">
        <li class="navLi">Hi There</li>
        <li class="navLi">Hi There</li>
        <li class="navLi">Hi There</li>
        <li class="navLi">Hi There</li>
        <li class="navLi">Hi There</li>
      </ul>
    </div>
    
  </body>
</html>

相关内容

最新更新

热门标签：