JS无法移除HTML元素hidden属性，响应式侧边栏显示隐藏失效

1. NodeList集合无法直接调用元素属性方法 #

你用document.querySelectorAll(".hiddens")获取的是NodeList节点集合，不是单个DOM元素。getAttribute、removeAttribute、setAttribute都是单个DOM元素的方法，直接在集合上调用会导致方法不存在，逻辑自然不生效。

必须遍历集合内的每个元素，逐个操作：

function show(){
  hidden.forEach(el => el.removeAttribute("hidden"));
}

function hide(){
  hidden.forEach(el => el.setAttribute("hidden", ""));
}

2. setAttribute调用参数错误 #

hidden是HTML布尔属性，setAttribute需要传入两个参数：属性名和属性值（布尔属性值可设为空字符串）。你写的hidden.setAttribute("hidden")缺少第二个参数，浏览器无法正确识别，导致属性设置失败。

更简洁可靠的方式是直接操作DOM元素的hidden属性（这是DOM API提供的布尔属性，比setAttribute更直观）：

function show(){
  hidden.forEach(el => el.hidden = false);
}

function hide(){
  hidden.forEach(el => el.hidden = true);
}

3. 侧边栏宽度判断逻辑不可靠 #

sidebar.style["width"]只能获取内联样式的宽度，如果侧边栏初始宽度是通过CSS类（样式表定义）设置的，初始时sidebar.style.width会是空字符串，导致第一次点击时的判断逻辑直接走else分支，不符合预期。

推荐用类切换的方式控制侧边栏宽度和元素显示，这比直接操作内联样式更易维护，还能避免样式判断的问题：

/* 先在CSS中定义类 */
.sidebar {
  width: 5.5vw;
  transition: width 0.3s; /* 加上过渡动画提升体验 */
}
.sidebar.expanded {
  width: 18vw;
}

修改后的JS逻辑：

const menu = document.querySelector(".menu");
const sidebar = document.querySelector(".sidebar");
const hidden = document.querySelectorAll(".hiddens");

menu.addEventListener("click", toggleSidebar);

function toggleSidebar(){
  // 切换侧边栏的展开类
  const isExpanded = sidebar.classList.toggle("expanded");
  // 根据展开状态控制元素显示
  hidden.forEach(el => {
    el.hidden = !isExpanded;
  });
}

最终完整修正代码 #

<!-- 示例HTML结构 -->
<div class="sidebar">
  <button class="menu">菜单按钮</button>
  <div class="hiddens" hidden>需要隐藏的元素1</div>
  <div class="hiddens" hidden>需要隐藏的元素2</div>
</div>

<style>
.sidebar {
  width: 5.5vw;
  background: #eee;
  transition: width 0.3s ease;
}
.sidebar.expanded {
  width: 18vw;
}
</style>

<script>
const menu = document.querySelector(".menu");
const sidebar = document.querySelector(".sidebar");
const hidden = document.querySelectorAll(".hiddens");

menu.addEventListener("click", toggleSidebar);

function toggleSidebar(){
  const isExpanded = sidebar.classList.toggle("expanded");
  hidden.forEach(el => {
    el.hidden = !isExpanded;
  });
}
</script>

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