html二级菜单联动

HTML二级菜单联动通常是指在网页设计中，当用户点击一级菜单（顶级菜单）中的某个选项时，对应的二级菜单会自动显示或隐藏。这通常是通过JavaScript或jQuery等前端脚本语言实现的，利用事件监听和DOM操作来控制二级菜单的状态。

实现步骤如下：

1. HTML结构：创建一个包含一级菜单和二级菜单的布局，一级菜单通常作为`<ul>`列表，每个菜单项包含一个链接，而二级菜单则通常嵌套在一个父级`<ul>`里，初始状态是隐藏的。

<ul class="nav-level1">
  <li><a href="#">菜单项1</a>
    <ul class="nav-level2" style="display:none;">
      <li>菜单项1-1</li>
      <li>菜单项1-2</li>
    </ul>
  </li>
  <!-- 其他一级菜单项 -->
</ul>

2. JavaScript代码：给一级菜单项添加点击事件处理函数，当用户点击时，检测当前选中的链接，然后切换相应二级菜单的显示状态。

document.querySelectorAll('.nav-level1 li a').forEach(item => {
  item.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认链接跳转
    const subMenu = this.nextElementSibling.querySelector('.nav-level2');
    subMenu.style.display = subMenu.style.display === 'none' ? 'block' : 'none';
  });
});