js实现分级菜单

实现分级菜单的方法

使用JavaScript实现分级菜单可以通过DOM操作和事件监听来完成。以下是几种常见的实现方式：

使用纯JavaScript实现

// 获取菜单元素
const menuItems = document.querySelectorAll('.menu-item');

// 为每个菜单项添加点击事件
menuItems.forEach(item => {
  item.addEventListener('click', function(e) {
    // 阻止默认行为
    e.preventDefault();

    // 切换子菜单显示状态
    const subMenu = this.querySelector('.sub-menu');
    if (subMenu) {
      subMenu.style.display = subMenu.style.display === 'block' ? 'none' : 'block';
    }
  });
});

使用CSS类切换实现

const menuItems = document.querySelectorAll('.menu-item');

menuItems.forEach(item => {
  item.addEventListener('click', function(e) {
    e.preventDefault();
    const subMenu = this.querySelector('.sub-menu');
    if (subMenu) {
      subMenu.classList.toggle('active');
    }
  });
});

对应的CSS样式：

.sub-menu {
  display: none;
}

.sub-menu.active {
  display: block;
}

递归实现多级菜单

function initMenu(menuContainer) {
  const items = menuContainer.querySelectorAll('li');

  items.forEach(item => {
    const subMenu = item.querySelector('ul');
    if (subMenu) {
      // 添加点击事件
      item.addEventListener('click', function(e) {
        e.stopPropagation();
        subMenu.classList.toggle('open');
      });

      // 递归初始化子菜单
      initMenu(subMenu);
    }
  });
}

// 初始化顶级菜单
initMenu(document.getElementById('main-menu'));

实现注意事项

确保菜单结构合理，通常使用嵌套的<ul>和<li>元素构建菜单层级。例如：

<ul id="main-menu">
  <li>
    <a href="#">一级菜单1</a>
    <ul class="sub-menu">
      <li><a href="#">二级菜单1</a></li>
      <li><a href="#">二级菜单2</a></li>
    </ul>
  </li>
  <li>
    <a href="#">一级菜单2</a>
    <ul class="sub-menu">
      <li><a href="#">二级菜单3</a></li>
    </ul>
  </li>
</ul>

性能优化建议

对于大型菜单系统，可以考虑使用事件委托来减少事件监听器的数量：

document.getElementById('main-menu').addEventListener('click', function(e) {
  const target = e.target.closest('.menu-item');
  if (target) {
    e.preventDefault();
    const subMenu = target.querySelector('.sub-menu');
    if (subMenu) {
      subMenu.classList.toggle('active');
    }
  }
});

动画效果增强

为菜单添加平滑的动画效果可以提升用户体验：

.sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.sub-menu.active {
  max-height: 500px;
}

以上方法可以根据具体需求进行组合和调整，实现不同风格和功能的分级菜单。