js菜单 点击展开

<ul class="menu">
  <li>
    <span class="menu-item">菜单1</span>
    <ul class="submenu">
      <li>子菜单1-1</li>
      <li>子菜单1-2</li>
    </ul>
  </li>
  <li>
    <span class="menu-item">菜单2</span>
    <ul class="submenu">
      <li>子菜单2-1</li>
      <li>子菜单2-2</li>
    </ul>
  </li>
</ul>

.submenu {
  display: none; /* 默认隐藏子菜单 */
}

.submenu.active {
  display: block; /* 展开时显示子菜单 */
}

document.addEventListener('DOMContentLoaded', function() {
  const menuItems = document.querySelectorAll('.menu-item');

  menuItems.forEach(function(item) {
    item.addEventListener('click', function() {
      const submenu = this.nextElementSibling;
      if (submenu && submenu.classList.contains('submenu')) {
        submenu.classList.toggle('active'); // 切换子菜单的显示状态
      }
    });
  });
});