折叠菜单javascript 折叠菜单代码

折叠菜单是一种常见的网页交互元素，它可以在页面上显示一组菜单项，用户可以点击菜单项来展开或折叠子菜单。这样可以节省页面空间，使用户可以更好地浏览和选择菜单项。

在JavaScript中，我们可以使用一些技术来实现折叠菜单的效果。其中，一个常见的实现方式是使用事件监听器来捕捉菜单项的点击事件，并通过改变菜单项的样式或显示/隐藏子菜单来实现折叠菜单的效果。

下面是一个简单的折叠菜单的示例代码：

HTML部分：

<div class="bb8d-b251-92f6-648d menu">
  <div class="b251-92f6-648d-be5a menu-item">菜单项1</div>
  <div class="92f6-648d-be5a-27d3 menu-item">菜单项2</div>
  <div class="648d-be5a-27d3-933b menu-item with-submenu">
    菜单项3
    <div class="be5a-27d3-933b-c947 submenu">
      <div class="27d3-933b-c947-7554 submenu-item">子菜单项1</div>
      <div class="933b-c947-7554-fe41 submenu-item">子菜单项2</div>
      <div class="c947-7554-fe41-feb8 submenu-item">子菜单项3</div>
    </div>
  </div>
  <div class="7554-fe41-feb8-5d5b menu-item">菜单项4</div>
</div>

CSS部分：

.menu-item {
  cursor: pointer;
}
.submenu {
  display: none;
}

JavaScript部分：

// 获取所有菜单项
const menuItems = document.querySelectorAll('.menu-item');
// 遍历菜单项，为每个菜单项添加点击事件监听器
menuItems.forEach((menuItem) => {
  menuItem.addEventListener('click', () => {
    // 判断是否有子菜单
    if (menuItem.classList.contains('with-submenu')) {
      // 获取子菜单
      const submenu = menuItem.querySelector('.submenu');
      // 切换子菜单的显示/隐藏
      submenu.style.display = (submenu.style.display === 'none') ? 'block' : 'none';
    }
  });
});

在这个示例代码中，我们首先定义了一个包含菜单项的容器元素，每个菜单项都是一个`div`元素，并且有一个共同的类名`.menu-item`。其中，菜单项3有一个子菜单，它的父元素还有一个类名`.with-submenu`。

在CSS部分，我们设置了菜单项的鼠标样式，并将子菜单的显示设置为`none`，使其初始状态下不可见。

在JavaScript部分，我们首先通过`document.querySelectorAll('.menu-item')`获取了所有的菜单项，并使用`forEach`遍历每个菜单项。然后，我们为每个菜单项添加了一个点击事件监听器。当用户点击菜单项时，监听器会判断该菜单项是否有子菜单（即是否包含`.with-submenu`类名），如果有，则获取该菜单项的子菜单，并通过改变子菜单的`display`属性来切换子菜单的显示和隐藏状态。

这个示例代码只是一个简单的折叠菜单的实现，实际应用中可以根据需求进行扩展和优化。例如，可以添加动画效果、支持多级子菜单、根据用户权限动态生成菜单等。还可以结合其他技术如CSS框架或前端框架来简化开发和提升用户体验。