JS实现的简单横向伸展二级菜单

在网页设计中，为了方便用户浏览网站内容，通常会使用菜单来导航页面。二级菜单是一种常见的菜单形式，可以将更多的功能或选项以清晰的层级结构呈现给用户。本篇博客将介绍如何使用 JavaScript 实现一个简单的横向伸展二级菜单。

HTML 结构

首先，我们需要创建一个简单的 HTML 结构作为菜单的基础。以下是一个示例：

<nav>
  <ul class="menu">
    <li><a href="#">菜单项一</a></li>
    <li>
      <a href="#">菜单项二</a>
      <ul>
        <li><a href="#">子菜单项一</a></li>
        <li><a href="#">子菜单项二</a></li>
        <li><a href="#">子菜单项三</a></li>
      </ul>
    </li>
    <li><a href="#">菜单项三</a></li>
    <li><a href="#">菜单项四</a></li>
  </ul>
</nav>

在这个示例中，我们使用 <ul> 和 <li> 元素来创建菜单的无序列表，<a> 元素表示菜单项的链接。如果一个菜单项有子菜单，我们可以在 <li> 内部再次创建一个 <ul> 列表。

CSS 样式

下面我们为菜单添加一些基本的 CSS 样式，并且设置默认状态下子菜单隐藏：

.menu ul {
  display: none;
}

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

在上述样式中，我们使用 display 属性来控制子菜单的显示或隐藏。默认情况下，子菜单使用 display: none; 进行隐藏。当鼠标悬停在某个菜单项上时，通过 :hover 伪类选择器，将其子菜单的 display 属性设置为 block，使子菜单显示出来。

JavaScript 实现

接下来，我们可以使用 JavaScript 来实现交互功能，使菜单在点击时展开或收起。以下是一个简单的实现示例：

var menuItems = document.querySelectorAll('.menu > li');

menuItems.forEach(function(item) {
  item.addEventListener('click', function(e) {
    var subMenu = item.querySelector('ul');
    if (subMenu) {
      e.preventDefault();
      subMenu.style.display = (subMenu.style.display == 'block') ? 'none' : 'block';
    }
  });
});

在这个示例中，我们首先使用 document.querySelectorAll 方法获取所有一级菜单项。然后通过循环添加了每个菜单项的点击事件监听器。在点击事件处理程序中，我们首先查找菜单项下的子菜单元素，如果存在子菜单，则阻止默认的链接点击行为。然后，我们使用 style.display 属性来切换子菜单的显示或隐藏。

改进和扩展

这只是一个简单的示例，你可以根据实际需求进行改进和扩展。你可以添加更多的 CSS 样式来美化菜单，例如添加动画效果，调整菜单的颜色和布局等。你还可以使用 JavaScript 来实现更复杂的功能，例如添加过渡效果，改变子菜单的位置等。

希望本篇博客对你了解如何使用 JavaScript 实现简单的横向伸展二级菜单有所帮助。如果你对此有任何问题或疑问，欢迎在下方留言。感谢阅读！

参考资料：

• MDN Web Docs: CSS display
• MDN Web Docs: querySelectorAll