二级导航js

二级导航可以通过以下步骤实现：

1. 首先，在HTML中创建一个包含所有导航链接的列表。

<ul class="nav-list">
  <li><a href="#">Link 1</a></li>
  <li class="has-subnav">
    <a href="#">Link 2</a>
    <ul class="subnav-list">
      <li><a href="#">Sublink 1</a></li>
      <li><a href="#">Sublink 2</a></li>
      <li><a href="#">Sublink 3</a></li>
    </ul>
  </li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
</ul>

2. 接下来，使用CSS隐藏所有子导航。

.subnav-list {
  display: none;
}

3. 使用JavaScript添加事件监听器，以便在鼠标悬停或点击时显示子导航。

// 获取所有具有子导航的列表项
var hasSubnav = document.querySelectorAll('.has-subnav');

// 遍历所有列表项，并为每个添加事件监听器
for (var i = 0; i < hasSubnav.length; i++) {
  // 鼠标悬停时显示子导航
  hasSubnav[i].addEventListener('mouseenter', function() {
    this.querySelector('.subnav-list').style.display = 'block';
  });
  // 鼠标离开时隐藏子导航
  hasSubnav[i].addEventListener('mouseleave', function() {
    this.querySelector('.subnav-list').style.display = 'none';
  });
  // 点击时切换子导航的显示/隐藏状态
  hasSubnav[i].addEventListener('click', function(event) {
    event.preventDefault(); // 防止链接被点击时跳转到其他页面
    var subnav = this.querySelector('.subnav-list');
    if (subnav.style.display === 'block') {
      subnav.style.display = 'none';
    } else {
      subnav.style.display = 'block';
    }
  });
}

通过以上步骤，就可以在网站中添加一个基本的二级导航。当鼠标悬停在具有子导航的链接上时，子导航会出现；当鼠标离开时，子导航会消失。另外，点击链接也会切换子导航的显示/隐藏状态。你可以根据自己的需要修改JavaScript代码来实现更高级的功能。