web 前端如何用 JavaScript 代码实现伸缩二级菜单

伸缩二级菜单的实现通常涉及到DOM操作、CSS样式控制以及JavaScript事件处理。这三者结合可以创建用户友好、响应式的导航栏。在JavaScript中，可以通过修改DOM元素的class属性或者直接操作style属性来实现菜单的显示与隐藏。这通常伴随着添加交互性事件，如点击或鼠标悬停，来触发伸缩效果。

精细描述中的一点，DOM操作是实现伸缩二级菜单的核心技术。通过访问和修改DOM，JavaScript可以动态地改变菜单的可见性。访问DOM的方法包括getElementById、getElementsByClassName、querySelector等，而修改DOM则可通过classList.add、 classList.remove、 classList.toggle或style属性。

一、前置知识点

在实现伸缩二级菜单之前，我们需要掌握一些关键的前置知识点。

HTML结构设计: 伸缩二级菜单要求有合理的HTML结构，通常情况下，这意味着一个嵌套的列表。顶级菜单项作为父节点，而二级菜单项作为子节点放在父节点下的子列表中。

CSS样式控制: 通过CSS我们可以控制二级菜单的初始显示状态（通常是隐藏的），以及伸缩时的动画和视觉效果。CSS的display、visibility、opacity 和 transform 属性在这里都可能用到。

JavaScript事件处理: JavaScript允许我们定义事件处理函数来响应用户的交互操作，例如点击、鼠标悬停等，这些事件处理函数将触发菜单的伸缩动作。

二、HTML结构设计

伸缩二级菜单的实现首先需要构筑一个适合的HTML结构。

<ul id="primary-menu">
  <li class="menu-item">
    <a href="#">主菜单项1</a>
    <ul class="sub-menu">
      <li><a href="#">二级菜单项1</a></li>
      <li><a href="#">二级菜单项2</a></li>
    </ul>
  </li>
  <li class="menu-item">
    <a href="#">主菜单项2</a>
    <ul class="sub-menu">
      <li><a href="#">二级菜单项1</a></li>
      <li><a href="#">二级菜单项2</a></li>
    </ul>
  </li>
</ul>

这个结构中，顶级的<ul>标签代表主菜单，每个顶级菜单项都是<li>元素，其内部嵌套了一个对应的二级菜单<ul class="sub-menu">。

三、CSS样式控制

为了使二级菜单默认处于不可见状态，并且在触发时有一个平滑的过渡效果，我们需要为二级菜单和相关的类编写一些基础的样式。

/* 主菜单样式 */
#primary-menu {
  list-style: none;
  padding: 0;
}
#primary-menu .menu-item {
  position: relative;
}
/* 二级菜单默认样式：隐藏 */
#primary-menu .sub-menu {
  display: none;
  position: absolute;
  list-style: none;
  padding: 0;
}

我们还可以添加一个类，比如.active，在JavaScript中将其添加到希望显示的菜单上，以便控制菜单项的显示。

/* 激活状态下的二级菜单样式：显示 */
#primary-menu .sub-menu.active {
  display: block;
}

四、JavaScript事件处理

事件处理是伸缩二级菜单功能的重点，我们需要编写JavaScript来监听用户的交互行为，并据此展开或折叠二级菜单。

// 获取所有顶级菜单项
var menuItems = document.querySelectorAll('#primary-menu > .menu-item');
// 遍历所有顶级菜单项并添加点击事件监听
menuItems.forEach(function (menuItem) {
  menuItem.addEventListener('click', function (e) {
    // 阻止默认事件，比如链接跳转
    e.preventDefault();
    // 切换当前点击菜单项的二级菜单的可见性
    var subMenu = menuItem.querySelector('.sub-menu');
    subMenu.classList.toggle('active');
    // 关闭其他菜单项的二级菜单
    menuItems.forEach(function (item) {
      if (item !== menuItem) {
        item.querySelector('.sub-menu').classList.remove('active');
      }
    });
  });
});