js 实现菜单切换

实现菜单切换的 JavaScript 方法

使用 classList 切换类名

通过 classList.toggle() 动态添加或移除控制菜单显示的 CSS 类，例如 active。HTML 结构需包含触发按钮和菜单容器：

<button id="menuToggle">菜单</button>
<nav id="menu" class="hidden">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
  </ul>
</nav>

CSS 定义隐藏状态和显示样式：

.hidden { display: none; }
.active { display: block; }

JavaScript 实现切换逻辑：

const toggleBtn = document.getElementById('menuToggle');
const menu = document.getElementById('menu');

toggleBtn.addEventListener('click', () => {
  menu.classList.toggle('active');
});

直接操作 style 属性

通过修改元素的 style.display 属性实现显隐切换：

const toggleBtn = document.getElementById('menuToggle');
const menu = document.getElementById('menu');

toggleBtn.addEventListener('click', () => {
  if (menu.style.display === 'none') {
    menu.style.display = 'block';
  } else {
    menu.style.display = 'none';
  }
});

使用数据属性（data-*）

通过自定义属性存储状态，增强代码可读性：

<button id="menuToggle" data-menu-state="closed">菜单</button>

JavaScript 逻辑：

const toggleBtn = document.getElementById('menuToggle');
const menu = document.getElementById('menu');

toggleBtn.addEventListener('click', () => {
  const state = toggleBtn.getAttribute('data-menu-state');
  if (state === 'closed') {
    menu.style.display = 'block';
    toggleBtn.setAttribute('data-menu-state', 'open');
  } else {
    menu.style.display = 'none';
    toggleBtn.setAttribute('data-menu-state', 'closed');
  }
});

动画效果增强

结合 CSS transition 实现平滑动画效果：

#menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
#menu.active {
  max-height: 500px;
}

JavaScript 只需切换类名：

document.getElementById('menuToggle').addEventListener('click', () => {
  document.getElementById('menu').classList.toggle('active');
});

多级菜单实现

对于嵌套菜单，使用事件委托处理动态元素：

<ul id="mainMenu">
  <li>
    <a href="#">一级菜单</a>
    <ul class="submenu">
      <li><a href="#">二级项</a></li>
    </ul>
  </li>
</ul>

JavaScript 实现：

document.getElementById('mainMenu').addEventListener('click', (e) => {
  if (e.target.nextElementSibling?.classList.contains('submenu')) {
    e.target.nextElementSibling.classList.toggle('active');
  }
});