嘿，我一眼就发现问题所在了——你在toggleNav函数内部又用let重新声明了toggleNavStatus变量，这直接覆盖了全局作用域的同名变量！

每次点击按钮执行函数时，你修改的都是函数内部的局部变量，而全局的toggleNavStatus状态根本没发生变化。第一次点击后，全局变量还是false，所以后续点击永远只会执行第一个分支，自然没法实现切换效果。

修正后的代码 #

JavaScript 部分 #

let toggleNavStatus = false;
function toggleNav() {
  let getSidebar = document.querySelector(".nav-sidebar");
  if (toggleNavStatus === false) {
    getSidebar.style.visibility = "visible";
    toggleNavStatus = true; // 去掉let，直接修改全局变量
  } else if (toggleNavStatus === true) {
    getSidebar.style.visibility = "hidden";
    toggleNavStatus = false; // 同样去掉let
  }
}

CSS 部分（保持不变） #

.nav-sidebar {
  width: 250px;
  height: 70vh;
  background-color: #1b1b1b;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

HTML 部分（保持不变） #

<a href="#" onclick="toggleNav()">button</a>
<aside class="nav-sidebar">
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
  </ul>
</aside>

更优雅的优化方案（推荐） #

其实我们可以用CSS类来控制显示隐藏，避免全局变量的困扰，代码也更简洁：

优化后的代码 #

.nav-sidebar {
  width: 250px;
  height: 70vh;
  background-color: #1b1b1b;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}
/* 新增类控制显示 */
.nav-sidebar.visible {
  visibility: visible;
}

function toggleNav() {
  document.querySelector(".nav-sidebar").classList.toggle("visible");
}

HTML部分完全不用改，这样点击按钮时会自动切换visible类的存在，实现显示/隐藏的切换，逻辑更清晰，也不用维护全局状态变量~

至于为什么在fiddle里也没法运行？因为核心问题是变量作用域的错误，不管在哪个环境下运行，这个逻辑缺陷都会导致功能失效，修正后就能正常工作啦！

内容的提问来源于stack exchange，提问作者Toni