js实现原生二级菜单

### 回答1：
好的，下面是用 JavaScript 实现原生二级菜单的示例代码：

<ul id="menu">
  <li>菜单一
    <ul>
      <li>子菜单一</li>
      <li>子菜单二</li>
      <li>子菜单三</li>
    </ul>
  </li>
  <li>菜单二
    <ul>
      <li>子菜单四</li>
      <li>子菜单五</li>
      <li>子菜单六</li>
    </ul>
  </li>
</ul>

<style>
  #menu ul {
    display: none;
  }
</style>

<script>
  var menu = document.getElementById("menu");
  menu.addEventListener("click", function(e) {
    var target = e.target;
    var submenu = target.querySelector("ul");
    if (submenu) {
      submenu.style.display = submenu.style.display === "block" ? "none" : "block";
    }
  });
</script>

在这段代码中，我们首先获取了包含菜单的 `ul` 元素，然后为其添加了一个点击事件处理函数。在这个函数中，我们通过 `e.target` 获取被点击的元素，然后使用 `querySelector` 方法获取其中的子菜单 `ul` 元素（如果有的话）。然后我们通过修改子菜单的 `style.display` 属性来显示或隐藏子菜单。

希望这个示例代码能帮到你。

### 回答2：
原生的二级菜单指的是使用JavaScript来实现没有依赖第三方库或框架的二级菜单。以下是实现原生二级菜单的步骤：

1. HTML结构：首先，在HTML中创建菜单的基本结构，包括一级菜单和对应的二级菜单。例如：

<ul id="menu">
  <li>
    <a href="#">菜单1</a>
    <ul>
      <li><a href="#">子菜单1</a></li>
      <li><a href="#">子菜单2</a></li>
      <li><a href="#">子菜单3</a></li>
    </ul>
  </li>
  <li>
    <a href="#">菜单2</a>
    <ul>
      <li><a href="#">子菜单4</a></li>
      <li><a href="#">子菜单5</a></li>
      <li><a href="#">子菜单6</a></li>
    </ul>
  </li>
</ul>

2. CSS样式：为菜单和二级菜单添加样式，以使其显示为下拉菜单的形式。例如：

#menu ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

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

3. JavaScript交互：使用JavaScript为菜单添加交互效果，使鼠标悬停在一级菜单时，对应的二级菜单显示出来。例如：

var menuItems = document.querySelectorAll("#menu li");

for (var i = 0; i < menuItems.length; i++) {
  var menuItem = menuItems[i];
  
  menuItem.addEventListener("mouseover", function() {
    var subMenu = this.querySelector("ul");
    if (subMenu) {
      subMenu.style.display = "block";
    }
  });
  
  menuItem.addEventListener("mouseout", function() {
    var subMenu = this.querySelector("ul");
    if (subMenu) {
      subMenu.style.display = "none";
    }
  });
}

通过以上步骤，我们可以实现一个使用JavaScript实现原生二级菜单的效果。

### 回答3：
要实现原生的二级菜单，可以使用JavaScript来动态地修改HTML和CSS。具体步骤如下：

1. HTML结构：
创建一个顶级菜单，可以使用无序列表（`<ul>`）来表示，每个菜单项使用列表项（`<li>`）表示。在需要出现二级菜单的菜单项中，再添加一个嵌套的无序列表来表示二级菜单。

2. CSS样式：
定义菜单项（`<li>`）和二级菜单（`<ul>`）的样式，包括背景颜色、字体样式等。

3. JavaScript代码：
使用JavaScript代码来实现菜单项的交互和显示隐藏二级菜单。具体步骤如下：
- 首先，获取所有一级菜单项和对应的二级菜单。
- 给每个一级菜单项添加一个鼠标移入事件监听器（`mouseover`），当鼠标移入时，显示对应的二级菜单。
- 给每个一级菜单项添加一个鼠标移出事件监听器（`mouseout`），当鼠标移出时，隐藏对应的二级菜单。

4. JavaScript代码示例：

// 获取所有一级菜单项
var items = document.querySelectorAll('.menu-item');

// 遍历每个一级菜单项，为其添加事件监听器
items.forEach(function(item) {
  item.addEventListener('mouseover', function() {
    // 显示对应的二级菜单
    item.querySelector('.sub-menu').style.display = 'block';
  });

  item.addEventListener('mouseout', function() {
    // 隐藏对应的二级菜单
    item.querySelector('.sub-menu').style.display = 'none';
  });
});

这样，当鼠标移入一级菜单项时，对应的二级菜单会显示出来；当鼠标移出一级菜单项时，对应的二级菜单会隐藏起来。通过上述HTML、CSS和JavaScript的组合，就可以实现一个简单的原生二级菜单。