为什么我的JavaScript无法修改CSS实现移动端导航栏按钮切换功能

架构老林

2026-9-25

问题原因

CSS选择器语法错误：你写的.ul-navbar [data-visible="true"]中间包含空格，属于后代选择器规则，只会匹配.ul-navbar内部带有data-visible="true"属性的子元素，但你实际是把data-visible属性直接挂载到.ul-navbar元素本身，所以规则无法命中元素。
JavaScript属性赋值不严谨：setAttribute第二个参数建议统一传入字符串类型的"true"/"false"，避免不同浏览器的类型转换差异。
可选优化：缺少过渡动画、无障碍属性未同步更新。

修复代码

CSS部分

/* p-head */
.primary-header {
  align-items: center;
  justify-content: space-between;
}
/* 全局重置可选，避免ul默认样式影响 */
.ul-navbar {
  margin: 0;
  list-style: none;
  transition: transform 0.3s ease;
}
/* for mobile devices */
@media (max-width: 35em) {
  .ul-navbar {
    position: fixed;
    z-index: 1000;
    inset: 0 0 0 30%;
    flex-direction: column;
    padding: min(30vh, 10rem) 2rem;
    transform: translateX(100%);
  }
  /* 删掉选择器中间的空格，直接匹配带属性的当前元素 */
  .ul-navbar[data-visible="true"] {
    transform: translateX(0%);
  }
  .nav-toggle {
    display: block;
    position: absolute;
    z-index: 9999;
    background: url(amburger.png) no-repeat;
    width: 1rem;
    height: 1rem;
    border: 0;
    background-color: red;
    top: 2rem;
    right: 2rem;
    cursor: pointer;
  }
}

JavaScript部分

const ulNav = document.querySelector(".ul-navbar");
const navButt = document.querySelector(".nav-toggle");

navButt.addEventListener("click", () => {
    const vis = ulNav.getAttribute('data-visible');
    if (vis === "false") {
        ulNav.setAttribute("data-visible", "true");
        navButt.setAttribute("aria-expanded", "true");
    } else {
        ulNav.setAttribute("data-visible", "false");
        navButt.setAttribute("aria-expanded", "false");
    }
});