JavaScript点击菜单图标无法二次切换nav-items visibility问题排查

问题描述 #

我正在尝试创建一个响应式navbar。当屏幕尺寸缩小时，使用CSS媒体查询将#nav-items的visibility设置为hidden，并显示菜单图标。编写了JavaScript代码处理菜单图标的点击事件，试图通过判断style值来切换#nav-items的visibility为visible或hidden。问题是：第一次点击时显示正常，#nav-items变为可见，但再次点击时，#nav-items的样式无法切换回hidden（虽然每次点击的console事件都能正常触发）。仅想了解以下代码中的JavaScript问题。

相关代码 #

JavaScript

let nav_icon = document.getElementById("nav-icon");
nav_icon.addEventListener("click", () => {
  console.log('clicked');
  let nav_items = document.getElementById("nav-items");
  nav_items.style.visibility = nav_items.style.visibility = "hidden" ? "visible" : "hidden";
});

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

a,
ul,
h3 {
  text-decoration: none;
  color: white;
  list-style-type: none;
  font-weight: bold;
}

body {
  background-image: url("/img/bg.jpg");
}

img {
  display: none;
  height: 30px;
  width: 30px;
  margin-right: 10px;
  position: fixed;
  top: .4em;
  right: .2em;
}

.navbar {
  display: flex;
  height: 40px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  background-color: #ABA9A966;
  gap: 10px;
}

nav a,
header h3 {
  margin: 0px 10px 0px 10px;
}

nav a:hover {
  background-color: grey;
}

@media screen and (max-width: 800px) {
  nav a,
  header h3 {
    margin: 0px 5px 0px 5px;
    font-size: 15px;
  }
}

@media screen and (max-width: 600px) {
  .navbar {
    flex-flow: column;
  }
  header {
    display: none;
  }
  nav {
    width: auto;
    text-align: center;
    background-color: #ABA9A966;
    position: fixed;
    visibility: hidden;
    top: 2.5em;
    right: 0;
  }
  nav a {
    margin: 0;
    height: 22px;
    padding-top: 3px;
    display: block;
    width: 8rem;
    font-size: 14px;
  }
  img {
    display: block;
  }
}

HTML

<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="navbar">
  <header>
    <h3>Hello Guest</h3>
  </header>
  <nav id="nav-items">
    <a href="#" class="nav-item">Home</a>
    <a href="#">Dispatch</a>
    <a href="#">Account</a>
    <a href="#">Report</a>
    <a href="#">Control</a>
  </nav>
</div>
<img src="/img/menu.png" id="nav-icon">

JavaScript代码问题分析 #

你的代码存在两个关键错误：

1. 重复赋值+错误的判断条件：nav_items.style.visibility = nav_items.style.visibility = "hidden" ? "visible" : "hidden" 中，你写了两次冗余的赋值，且三元表达式的判断条件是字符串"hidden"——这个值在JS里永远为真，所以无论当前状态如何，都会返回"visible"。第一次点击后style.visibility被设为"visible"，之后每次点击都会强制保持这个值，无法切换回hidden。
2. 初始状态判断遗漏：初始时#nav-items的visibility是通过CSS媒体查询设置的，不是内联样式，所以nav_items.style.visibility初始值为空字符串，直接判断hidden会不符合预期。

修正后的JavaScript代码 #

let nav_icon = document.getElementById("nav-icon");
nav_icon.addEventListener("click", () => {
  console.log('clicked');
  let nav_items = document.getElementById("nav-items");
  // 正确判断当前状态：如果是visible则切换为hidden，否则（包括初始空值状态）切换为visible
  nav_items.style.visibility = nav_items.style.visibility === "visible" ? "hidden" : "visible";
});

修正说明 #

• 移除了重复的赋值语句，简化逻辑
• 把判断条件改为检查当前内联样式是否为"visible"，覆盖了初始空值的情况，确保第一次点击能正常显示，后续点击可双向切换

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