js实现三级菜单

2026-04-04 04:15:46JavaScript

实现三级菜单的步骤

使用HTML、CSS和JavaScript实现一个三级菜单，可以通过嵌套的列表结构和事件监听来实现交互效果。

HTML结构

<ul class="menu">
  <li>
    <a href="#">一级菜单1</a>
    <ul>
      <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></li>
    </ul>
  </li>
  <li>
    <a href="#">一级菜单2</a>
    <ul>
      <li><a href="#">二级菜单3</a></li>
    </ul>
  </li>
</ul>

CSS样式

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

.menu li {
  position: relative;
}

.menu ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.menu > li > ul {
  left: 0;
  top: 100%;
}

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

JavaScript交互

document.addEventListener('DOMContentLoaded', function() {
  const menuItems = document.querySelectorAll('.menu li');

  menuItems.forEach(item => {
    if (item.querySelector('ul')) {
      item.addEventListener('mouseenter', function() {
        this.querySelector('ul').style.display = 'block';
      });

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

响应式设计考虑

为适应移动设备，可以添加媒体查询和触摸事件支持。

CSS媒体查询

@media (max-width: 768px) {
  .menu ul {
    position: static;
    box-shadow: none;
  }
}

JavaScript触摸支持

menuItems.forEach(item => {
  if (item.querySelector('ul')) {
    item.addEventListener('touchstart', function(e) {
      e.preventDefault();
      const submenu = this.querySelector('ul');
      submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
    });
  }
});

无障碍改进

为提升可访问性，可以添加ARIA属性和键盘导航支持。

HTML ARIA属性

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

键盘导航支持

menuItems.forEach(item => {
  const link = item.querySelector('a');
  if (link && link.getAttribute('aria-haspopup') === 'true') {
    link.addEventListener('keydown', function(e) {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        const submenu = item.querySelector('ul');
        const isExpanded = this.getAttribute('aria-expanded') === 'true';
        this.setAttribute('aria-expanded', !isExpanded);
        submenu.style.display = isExpanded ? 'none' : 'block';
      }
    });
  }
});

性能优化建议

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

事件委托实现

js实现三级菜单

document.querySelector('.menu').addEventListener('mouseover', function(e) {
  const target = e.target.closest('li');
  if (target && target.querySelector('ul')) {
    target.querySelector('ul').style.display = 'block';
  }
});

document.querySelector('.menu').addEventListener('mouseout', function(e) {
  const target = e.target.closest('li');
  if (target && target.querySelector('ul')) {
    target.querySelector('ul').style.display = 'none';
  }
});