如何用JavaScript的addEventListener切换类并双向修改data属性？

API 探路者

2026-7-20

问题排查与修复：点击按钮无法切换data-visible属性值

问题根源

你定义的visibility变量在事件监听外部初始化，仅获取了元素初始状态的data-visible值。后续每次点击按钮时，代码不会重新读取元素当前的属性值，判断逻辑始终基于初始值，导致第一次点击后无法触发反向切换。

修复方案1：每次点击重新获取属性值

将visibility的获取逻辑移到点击事件内部，确保每次判断都基于元素最新的状态：

const hamburger = document.querySelector(".hamburger")
const navigation = document.querySelector(".nav-wrapper")

hamburger.addEventListener('click', () => {
  // 每次点击都读取当前的data-visible值
  const visibility = navigation.getAttribute("data-visible")

  if (visibility === 'false') {
    navigation.classList.add('active');
    navigation.setAttribute('data-visible', 'true')
  } else {
    navigation.classList.remove('active');
    navigation.setAttribute('data-visible', 'false')
  }
})

修复方案2：利用toggle的返回值简化逻辑

classList.toggle()会返回布尔值，表示元素当前是否包含目标类，直接用这个结果同步data-visible属性，代码更简洁且状态同步更可靠：

const hamburger = document.querySelector(".hamburger")
const navigation = document.querySelector(".nav-wrapper")

hamburger.addEventListener('click', () => {
  // 切换active类，同时获取当前状态
  const isActive = navigation.classList.toggle('active');
  // 将布尔值转为字符串，匹配data属性的存储格式
  navigation.setAttribute('data-visible', isActive.toString());
})