为什么我的 switch 语句只运行一次？答案

【问题标题】：Why is my switch-statement only running once?为什么我的 switch 语句只运行一次？
【发布时间】：2019-07-21 11:53:24
【问题描述】：

所以我希望我的 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/

【问题讨论】：

您在页面加载时只分配给width一次
计算点击事件内的宽度
无论您是否设置，都不会将 '100%' 作为计算样式值返回
@CertainPerfomance 我如何多次分配它？
@Rishab 你的意思是我应该把宽度变量放在函数里面吗？

标签： javascript button switch-statement

【解决方案1】：

您的代码中的问题是 navBar 在按钮上添加了叠加层，这不允许您触发 click event.checks 下面的解决方案

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>

【讨论】：

非常感谢 Rishab - 我不敢相信这有多么简单，哈哈