当前位置：首页 > JavaScript

js实现二级菜单

2026-02-28 23:30:47JavaScript

使用HTML+CSS+JavaScript实现二级菜单

通过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="#">二级菜单1</a></li>
    </ul>
  </li>
</ul>

CSS样式

.menu {
  list-style: none;
  padding: 0;
  position: relative;
}
.menu > li {
  display: inline-block;
  position: relative;
}
.submenu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.menu li:hover > .submenu {
  display: block;
}

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

添加动画效果增强用户体验

通过CSS transition实现平滑过渡效果：

.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;
}

移动端适配方案

针对触摸设备添加点击事件支持：

if ('ontouchstart' in window) {
  document.querySelectorAll('.menu > li > a').forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      const submenu = this.nextElementSibling;
      const isOpen = submenu.style.display === 'block';

      document.querySelectorAll('.submenu').forEach(sm => {
        sm.style.display = 'none';
      });

      if (!isOpen) {
        submenu.style.display = 'block';
      }
    });
  });
}

无障碍访问优化

添加ARIA属性提升可访问性：

<ul class="menu" role="menubar">
  <li role="none">
    <a href="#" role="menuitem" aria-haspopup="true">一级菜单</a>
    <ul class="submenu" role="menu">
      <li role="none"><a href="#" role="menuitem">二级菜单</a></li>
    </ul>
  </li>
</ul>

// 添加键盘导航支持
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') {
    document.querySelectorAll('.submenu').forEach(sm => {
      sm.style.display = 'none';
    });
  }
});

js实现二级菜单