侧边导航ul宽度为0%时导航链接不隐藏的问题求解

问题根因 #

• JS 中使用 document.querySelector(".links-one") 仅会匹配第一个符合条件的链接元素（也就是Home链接），所以你修改display属性时只有第一个链接生效，其余链接状态不变。
• 你的ul选择器存在拼写错误：document.querySelector("ul-one") 漏掉了类选择器的.，正确写法应为.ul-one。
• 导航关闭时链接仍溢出显示，是因为ul设置宽度为0时没有添加overflow: hidden属性，子元素内容会超出容器边界展示。

修复方案 #

1. 修改CSS，新增溢出隐藏规则

给ul容器加overflow: hidden，容器宽度为0时自动隐藏内部内容，从根源解决链接溢出问题：

nav .ul-one {
  position: absolute;
  right: 0;
  top: 90px;
  background-color: #111;
  width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  transition: 0.5s ease-in-out;
  overflow: hidden; /* 新增这一行 */
}

2. 优化JS逻辑

加了overflow: hidden之后，你完全不需要单独控制每个链接的显隐，直接修改ul的宽度即可，代码可以简化为：

function nav () {
    const burger = document.querySelector(".burger");
    const ul = document.querySelector(".ul-one");
    let openNav = false;
    burger.addEventListener("click", ()  =>  {
        if (!openNav) {
            ul.style.width = "40%";
            openNav = true;
        } else {
            ul.style.width = "0";
            openNav = false;
        }
    });
}
nav();

如果你确实需要单独控制链接的显隐，就用querySelectorAll选中所有链接遍历修改：

function nav () {
    const burger = document.querySelector(".burger");
    const ul = document.querySelector(".ul-one");
    const links = document.querySelectorAll(".links-one"); // 选中所有链接
    let openNav = false;
    burger.addEventListener("click", ()  =>  {
        if (!openNav) {
            ul.style.width = "40%";
            links.forEach(link => link.style.display = "block");
            openNav = true;
        } else {
            ul.style.width = "0";
            links.forEach(link => link.style.display = "none");
            openNav = false;
        }
    });
}
nav();

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