js三级折叠菜单

以下是关于 JavaScript 实现三级折叠菜单的相关内容：

基础概念：三级折叠菜单是一种常见的网页交互元素，允许用户展开和折叠不同层级的菜单项，以展示或隐藏相关内容。

优势：

提供清晰的导航结构，方便用户快速找到所需信息。
节省页面空间，使页面布局更简洁。

类型：常见的有基于纯 JavaScript 实现的，也有结合 CSS 和 JavaScript 实现的。

应用场景：

大型网站的导航菜单。
内容较多的页面的分类筛选。

实现示例代码：

HTML 结构：

<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>

CSS 样式：

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

JavaScript 代码：

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';
      }
    }
  });
});

可能出现的问题及解决方法：