带子菜单的可点击导航栏：点击切换子菜单显示状态问题

方法一：直接操作display属性 #

这种方式适合快速实现，直接判断子菜单当前的显示状态并切换：

// 获取目标导航项和对应的子菜单
const navItem = document.querySelector('.nav-item');
const subMenu = navItem.querySelector('.sub-menu');

navItem.addEventListener('click', () => {
  // 初始状态若通过CSS设置display:none，style.display会是空字符串，需额外判断
  if (subMenu.style.display === 'none' || subMenu.style.display === '') {
    subMenu.style.display = 'block';
  } else {
    subMenu.style.display = 'none';
  }
});

方法二：CSS类控制（推荐） #

将样式与逻辑分离，便于后续维护和扩展动画效果：

1. 先定义CSS类：

.sub-menu {
  display: none; /* 初始隐藏 */
}
.sub-menu.show {
  display: block; /* 显示状态 */
}

2. 编写JS切换类：

const navItem = document.querySelector('.nav-item');
const subMenu = navItem.querySelector('.sub-menu');

navItem.addEventListener('click', () => {
  // 使用classList.toggle自动切换类的存在状态
  subMenu.classList.toggle('show');
});

多导航项场景：事件委托优化 #

如果页面有多个带下拉菜单的导航项，用事件委托减少监听数量，提升性能：

// 给导航容器添加监听
const navContainer = document.querySelector('.nav-container');

navContainer.addEventListener('click', (e) => {
  // 找到点击的导航项父元素
  const targetNavItem = e.target.closest('.nav-item');
  if (!targetNavItem) return; // 不是导航项则终止

  const subMenu = targetNavItem.querySelector('.sub-menu');
  subMenu.classList.toggle('show');
});

内容的提问来源于stack exchange，提问作者Abdul Rehman Javed