IF Else 語句不適用於花括號

Question

我正在使用 HTML、CSS 和 js 創建一個簡單的切換菜單。 我希望通過單擊“切換”按鈕菜單應該從左側移動到“0px”position，並且它可以正常工作。 但不會繼續前進 - 從左邊開始“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 之后的下一條語句

其次，因為nav.className = classes.join(" "); 無論條件如何都必須運行，您應該將其移到 else 括號之外

所以基本上

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(" ");
} );

等於

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 有誤解）

 // 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>