Question

我正在使用 HTML、CSS 和 js 创建一个简单的切换菜单。我希望通过单击“切换”按钮菜单应该从左侧移动到“0px”位置，并且它可以正常工作。但不会继续前进 - 从左侧“200px”。因为菜单的宽度是200px。

<块引用>

当我为 if 语句放置花括号时，工作停止。但是删除这些大括号后，代码运行良好。

// toggle menu for IE-9
const nav = document.querySelector( "#nav" );
const btn = document.querySelector( "#btn" );
btn.addEventListener( "click" , () => {
  var classes = nav.className.split( " " );
  var i = classes.indexOf( "show" );
  if (i >= 0 ) {
    classes.splice(i, 1);
  }
  else { 
    classes.push("show");
    nav.className = classes.join(" ");
  }
} );

body {
  background: #184d47;
}
/* stylin box */
.box {
  padding:20px;
  position: relative;
}
/* styling toggle button */
#btn {
  padding: 10px 25px;
  border: 2px solid #d44000;
  background: #d44000;
  color: #fff;
  font-family: arial;
  font-weight: bolder;
  letter-spacing: 1px;
  border-radius: 5px;
  user-select: none;
  transition: all .3s ease;
}
#btn:hover {
  background: #ff7a00;
  border: 2px solid #ff7a00;
  color: ff7a00;
  cursor: pointer;
  transition: all .3s ease;
}
/* styling list || nav */
#nav {
  width: 250px;
  height: 100%;
  background: #31326f;
  list-style: none;
  padding: 20px 0 0 0;
  position: fixed; 
  top: 60px;
  left: -250px;
  transition: all 1s ease;
}
#nav.show {
  left: 0px;
  transition: all 1s ease;
}
#nav li {
  padding: 10px 60px 10px 40px;
  border-bottom: 1px solid #dbf6e9;
  user-select: none;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.5px;
}

<div class="box">
  <buton id="btn" class="">Toggle</buton>
  <ul id="nav" class="">
    <li>HOME</li>
    <li>About</li>
    <li>Setting</li>
  </ul>
</div>

Answer 1

首先，当你使用不带括号的if/else时，它只会触发if/else之后的下一条语句

第二，因为contacts.php不管条件如何都必须运行，你应该把它移到else括号之外

所以基本上

nav.className = classes.join(" ");

等于

btn.addEventListener( "click" , () => {
  var classes = nav.className.split( " " );
  var i = classes.indexOf( "show" );
  if (i >= 0 )
    classes.splice(i, 1);
  else 
    classes.push("show");
    nav.className = classes.join(" ");
} );

空格/制表符在这里无关紧要（也许你对 Python 有误解）

btn.addEventListener( "click" , () => {
  var classes = nav.className.split( " " );
  var i = classes.indexOf( "show" );
  if (i >= 0 ) {
    classes.splice(i, 1);
  }
  else { 
    classes.push("show");
  }
    nav.className = classes.join(" ");
  
} );

// toggle menu for IE-9
const nav = document.querySelector( "#nav" );
const btn = document.querySelector( "#btn" );
btn.addEventListener( "click" , () => {
  var classes = nav.className.split( " " );
  var i = classes.indexOf( "show" );
  if (i >= 0 ) {
    classes.splice(i, 1);
  }
  else { 
    classes.push("show");
  }
  nav.className = classes.join(" ");
} );

body {
  background: #184d47;
}
/* stylin box */
.box {
  padding:20px;
  position: relative;
}
/* styling toggle button */
#btn {
  padding: 10px 25px;
  border: 2px solid #d44000;
  background: #d44000;
  color: #fff;
  font-family: arial;
  font-weight: bolder;
  letter-spacing: 1px;
  border-radius: 5px;
  user-select: none;
  transition: all .3s ease;
}
#btn:hover {
  background: #ff7a00;
  border: 2px solid #ff7a00;
  color: ff7a00;
  cursor: pointer;
  transition: all .3s ease;
}
/* styling list || nav */
#nav {
  width: 250px;
  height: 100%;
  background: #31326f;
  list-style: none;
  padding: 20px 0 0 0;
  position: fixed; 
  top: 60px;
  left: -250px;
  transition: all 1s ease;
}
#nav.show {
  left: 0px;
  transition: all 1s ease;
}
#nav li {
  padding: 10px 60px 10px 40px;
  border-bottom: 1px solid #dbf6e9;
  user-select: none;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.5px;
}

IF Else 语句不适用于花括号

1 个答案: