条件语句为false仍执行及JS/jQuery操作侧边栏技术求助

嘿，我来帮你搞定这两个前端小问题！

你碰到的这个坑，大概率是把字符串类型的"false"当成布尔类型的false判断啦！在JavaScript里，所有非空字符串都会被视为「真值（truthy）」——哪怕内容是"false"，直接丢进if()条件里也会触发代码块执行。

给你两个靠谱的解决思路：

• 直接和字符串"false"做严格比较：

  // 假设你的判断变量是condition
  if (condition !== "false") {
    // 这里放原本要执行的代码
  }
  

• 把字符串转换成布尔值再判断：

  // 用JSON.parse转换，"false"会变成布尔false，"true"变成布尔true
  if (JSON.parse(condition)) {
    // 执行代码
  }
  // 或者更简单的逻辑：空字符串、"false"都视为false
  if (condition && condition !== "false") {
    // 执行代码
  }
  

你的HTML结构已经搭好了，我来补全并优化你的JS/jQuery代码，分两种方案给你参考：

原生JS方案 #

注意toggleLeft.style.display只能获取元素的内联样式，如果侧边栏的初始显示状态是通过CSS类设置的，这个方法就拿不到正确值。推荐用classList.toggle来切换类，或者结合getComputedStyle判断：

先给侧边栏加个默认的隐藏类：

<style>
.side-menu .hidden {
  display: none;
}
</style>

<div class="side-menu">
  <ul id="mySidebar">...</ul>
</div>

然后完善JS函数：

var toggleLeft = document.getElementById("mySidebar");
function clickSidebar() {
  // 拿到当前复选框的选中状态
  const isChecked = event.target.checked;
  // 方案1：通过类切换显示/隐藏
  if (isChecked) {
    toggleLeft.classList.remove("hidden");
  } else {
    toggleLeft.classList.add("hidden");
  }
  // 或者用更简洁的toggle语法：
  // toggleLeft.classList.toggle("hidden", !isChecked);
}

如果一定要用display属性判断：

function clickSidebar() {
  const computedStyle = window.getComputedStyle(toggleLeft);
  const isHidden = computedStyle.display === "none";
  toggleLeft.style.display = isHidden ? "block" : "none";
}

jQuery方案 #

用jQuery的话代码会更简洁，还能轻松加动画效果：

function clickSidebar() {
  const isChecked = $(this).is(":checked");
  // 直接根据复选框状态切换显示
  $("#mySidebar").toggle(isChecked);
  // 想要动画的话可以换成slideToggle/fadeToggle：
  // $("#mySidebar").slideToggle();
}

另外，更推荐用事件监听的方式绑定点击事件（代替HTML里的onclick），更符合现代前端实践：

// 原生JS写法
document.querySelector(".side_button").addEventListener("click", clickSidebar);

// jQuery写法
$(".side_button").on("click", clickSidebar);

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