js三级折叠菜单

<ul class="menu">
  <li>
    <span>菜单 1</span>
    <ul>
      <li>
        <span>子菜单 1-1</span>
        <ul>
          <li>内容 1-1-1</li>
          <li>内容 1-1-2</li>
        </ul>
      </li>
      <li>内容 1-2</li>
    </ul>
  </li>
  <!-- 其他菜单项 -->
</ul>

.menu ul {
  display: none;
}
.menu li:hover > ul {
  display: block;
}

const menuItems = document.querySelectorAll('.menu > li');

menuItems.forEach(item => {
  item.addEventListener('click', function(e) {
    if (e.target.tagName === 'SPAN') {
      const subMenu = this.querySelector('ul');
      if (subMenu) {
        subMenu.style.display = subMenu.style.display === 'block' ? 'none' : 'block';
      }
    }
  });
});