js实现二级菜单

实现二级菜单的基本思路

使用HTML、CSS和JavaScript可以轻松实现二级菜单功能。核心思路是通过事件监听控制子菜单的显示与隐藏。

HTML结构示例

<ul class="menu">
  <li>
    <a href="#">主菜单1</a>
    <ul class="submenu">
      <li><a href="#">子菜单1</a></li>
      <li><a href="#">子菜单2</a></li>
    </ul>
  </li>
  <li>
    <a href="#">主菜单2</a>
    <ul class="submenu">
      <li><a href="#">子菜单3</a></li>
      <li><a href="#">子菜单4</a></li>
    </ul>
  </li>
</ul>

CSS样式设置

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu > li {
  position: relative;
  display: inline-block;
}

.submenu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background: #fff;
  padding: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

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

JavaScript交互增强

如果需要更精确的控制，可以使用JavaScript：

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

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

响应式处理

针对移动设备可以添加点击事件：

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

动画效果增强

使用CSS过渡效果可以让菜单显示更平滑：

.submenu {
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  pointer-events: none;
}

.menu li:hover > .submenu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

无障碍优化

为屏幕阅读器添加ARIA属性：

<ul class="menu" role="menubar">
  <li role="none">
    <a href="#" role="menuitem" aria-haspopup="true">主菜单1</a>
    <ul class="submenu" role="menu">
      <li role="none"><a href="#" role="menuitem">子菜单1</a></li>
    </ul>
  </li>
</ul>

通过以上方法可以实现一个功能完善、响应式的二级菜单系统。根据具体需求可以调整交互方式和视觉效果。