js实现分级菜单

分级菜单的实现方法

分级菜单（也称为多级下拉菜单或嵌套菜单）可以通过纯JavaScript或结合HTML/CSS实现。以下是几种常见的实现方式：

使用HTML/CSS和JavaScript创建分级菜单

HTML结构示例：

<ul class="menu">
  <li>
    <a href="#">一级菜单1</a>
    <ul>
      <li><a href="#">二级菜单1</a></li>
      <li><a href="#">二级菜单2</a></li>
    </ul>
  </li>
  <li>
    <a href="#">一级菜单2</a>
    <ul>
      <li><a href="#">二级菜单3</a></li>
      <li>
        <a href="#">二级菜单4</a>
        <ul>
          <li><a href="#">三级菜单1</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

CSS样式示例：

.menu ul {
  display: none;
  position: absolute;
  background: #fff;
  padding: 0;
  margin: 0;
}

.menu li {
  position: relative;
  list-style: none;
}

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

JavaScript交互增强：

document.querySelectorAll('.menu li').forEach(item => {
  item.addEventListener('mouseenter', function() {
    const submenu = this.querySelector('ul');
    if(submenu) {
      submenu.style.display = 'block';
    }
  });

  item.addEventListener('mouseleave', function() {
    const submenu = this.querySelector('ul');
    if(submenu) {
      submenu.style.display = 'none';
    }
  });
});

使用事件委托优化性能

对于大型菜单结构，可以使用事件委托减少事件监听器数量：

document.querySelector('.menu').addEventListener('mouseover', function(e) {
  if(e.target.tagName === 'LI') {
    const submenu = e.target.querySelector('ul');
    if(submenu) {
      submenu.style.display = 'block';
    }
  }
});

document.querySelector('.menu').addEventListener('mouseout', function(e) {
  if(e.target.tagName === 'LI') {
    const submenu = e.target.querySelector('ul');
    if(submenu) {
      submenu.style.display = 'none';
    }
  }
});

实现动画效果

可以添加过渡动画使菜单显示更平滑：

.menu ul {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s, transform 0.3s;
}

.menu li:hover > ul {
  opacity: 1;
  transform: translateY(0);
}

响应式移动端适配

针对移动设备添加点击展开功能：

document.querySelectorAll('.menu > li > a').forEach(link => {
  link.addEventListener('click', function(e) {
    if(window.innerWidth <= 768) {
      e.preventDefault();
      const submenu = this.nextElementSibling;
      if(submenu) {
        submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
      }
    }
  });
});

使用classList管理状态

更推荐使用classList而不是直接操作style：

document.querySelectorAll('.menu li').forEach(item => {
  item.addEventListener('mouseenter', function() {
    this.classList.add('active');
  });

  item.addEventListener('mouseleave', function() {
    this.classList.remove('active');
  });
});

对应CSS：

.menu li.active > ul {
  display: block;
}

这些方法可以根据具体需求组合使用，创建出功能完善、用户体验良好的分级菜单系统。