当前位置：首页 > 文章列表 > 文章 > 前端 > 原生JS多级下拉菜单实现教程

原生JS多级下拉菜单实现教程

2025-10-02 11:57:26 0浏览收藏

今天golang学习网给大家带来了《原生JS实现多级下拉菜单：悬停与点击响应式设计》，其中涉及到的知识点包括等等，无论你是小白还是老手，都适合看一看哦~有好的建议也欢迎大家在评论留言，若是看完有所收获，也希望大家能多多点赞支持呀！一起加油学习~

使用原生 JavaScript 实现响应式多级下拉菜单（悬停与点击）

本文旨在指导开发者使用原生 JavaScript、HTML 和 CSS 创建一个响应式的多级下拉菜单。该菜单在桌面端通过鼠标悬停展开，而在移动端则通过点击展开。文章将提供完整的代码示例，并解释关键实现步骤，帮助读者理解如何根据屏幕尺寸切换交互方式，并解决子菜单无法正确显示的问题。 ### HTML 结构首先，我们需要定义 HTML 结构。使用 `

` 元素构建菜单，并使用 `
` 元素包裹整个菜单： ```html
- Parent 1
  - Child 1
  - Child 2
  - Nested child
    
    Something
    
    Something
- Parent 2
  - Basic link 1
  - Basic link 2
  - Nested child 2
    
    Basic nested link 1
    
    Basic nested link 2
- Simple Link
- Another Link
为了更好地控制样式和语义，建议将顶级

标签内的文本包裹在中，并将子菜单的


    Link
    
        Child Link
        Child Link

CSS 样式

接下来，使用 CSS 定义菜单的样式。关键点在于使用媒体查询来区分桌面端和移动端，并设置不同的交互方式。

.menu {
  --menu-height: 40px;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
}
.menu ul {
  list-style: none;
  padding: 16px;
  margin: 0;
}
.menu ul li,
.menu ul li a {
  opacity: 0.8;
  color: #ffffff;
  cursor: pointer;
  transition: 200ms;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 700;
}
.menu ul li a,
.menu ul li a a {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
}
.menu ul li {
  padding-right: 36px;
}
.menu ul li::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #ffa500;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}
.menu ul .link::before {
  padding-right: 0;
  display: none;
}
.menu > ul {
  display: flex;
  height: var(--menu-height);
  align-items: center;
  background-color: #000000;
}
.menu > ul li {
  position: relative;
  margin: 0 8px;
}
.menu > ul li ul {
  visibility: hidden;
  opacity: 0;
  padding: 0;
  min-width: 160px;
  background-color: #333;
  position: absolute;
  top: 45px;
  left: 50%;
  transform: translateX(-50%);
  transition: 200ms;
  transition-delay: 200ms;
}
.menu > ul li ul li {
  margin: 0;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 30px;
  padding-right: 40px;
}
.menu > ul li ul li::before {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #ffa500;
}
.menu > ul li ul li ul {
  top: -2%;
  left: 100%;
  transform: translate(0);
}

.show {
  display: flex;
}

.hide {
  display: none;
}

@media screen and (min-width: 1200px) {
  .menu ul li:hover,
  .menu ul li a:hover {
    opacity: 1;
  }
  .menu > ul li ul li:hover {
    background: black;
  }
  .menu > ul li:hover > ul {
    opacity: 1;
    visibility: visible;
    transition-delay: 0ms;
  }
}

@media screen and (max-width: 1200px) {
  .menu {
    height: 100vh;
    top: 0;
    left: 0;
    width: 20vw;
  }
  .menu ul {
    flex-direction: column;
    height: 100vh;
  }
  .menu ul li {
    margin: 1rem 0;
  }
  .menu ul li ul {
    visibility: hidden;
    opacity: 0;
    padding: 0;
    min-width: 160px;
    background-color: #333;
    position: absolute;
    top: 0px;
    left: 200%;
    transform: translateX(-50%);
    transition: 200ms;
    transition-delay: 200ms;
    height: fit-content;
  }
  .menu ul.show {
    visibility: visible;
    opacity: 1;
  }
}

关键点：

visibility: hidden; 和 opacity: 0;: 初始状态下，隐藏子菜单。
@media screen and (min-width: 1200px): 桌面端媒体查询，使用 :hover 伪类显示子菜单。
@media screen and (max-width: 1200px): 移动端媒体查询，调整菜单布局。
.menu ul.show: 移动端点击后，设置 visibility: visible; 和 opacity: 1; 显示子菜单。这是解决子菜单不显示的关键。

JavaScript 交互

最后，使用 JavaScript 实现移动端的点击展开功能。

let menu = document.querySelector(".menu ul");
menu = menu.children;

for (let i = 0; i < menu.length; i++) {
  console.log(menu[i]);
  menu[i].addEventListener("click", function() {
    menu[i].firstElementChild.classList.toggle("show");
    console.log(menu[i].firstElementChild);
  });
}

这段代码遍历顶级菜单项，并为每个菜单项添加点击事件监听器。当点击菜单项时，切换其第一个子元素的 show 类。

注意事项：