js 菜单折叠

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

.menu .submenu {
  display: none;
}

.menu .submenu.active {
  display: block;
}

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

  menuTitles.forEach(function(title) {
    title.addEventListener('click', function() {
      const submenu = this.nextElementSibling;
      if (submenu && submenu.classList.contains('submenu')) {
        submenu.classList.toggle('active');
      }
    });
  });
});