原生JS实现多级下拉菜单：悬停点击切换教程

想要打造一个响应式、用户体验极佳的多级下拉菜单吗？本文将深入讲解如何利用原生JavaScript、HTML和CSS，实现桌面端鼠标悬停与移动端点击切换的完美效果。我们将详细解析HTML结构、CSS样式设计，以及JavaScript交互逻辑，着重解决移动端点击事件无法正确展开子菜单的问题。通过清晰的代码示例和优化建议，助你轻松构建出符合百度SEO规范、兼顾PC与移动端的实用导航菜单。立即学习，提升你的前端开发技能！

本文将指导你如何使用原生 JavaScript、HTML 和 CSS 创建一个响应式的多级下拉菜单。该菜单在桌面端使用鼠标悬停触发，而在移动端则通过点击触发。我们将重点解决移动端点击事件无法正确展开子菜单的问题，并提供代码示例和优化建议，帮助你构建一个用户体验良好的导航菜单。

HTML 结构

首先，我们需要定义 HTML 结构。一个包含多级嵌套 ul 列表的 div 元素将作为菜单的基础。

  

    

      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
  

CSS 样式

接下来，使用 CSS 定义菜单的样式，包括桌面端的悬停效果和移动端的显示方式。关键点在于控制子菜单的 visibility 和 opacity 属性。

.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): 媒体查询，针对桌面端（屏幕宽度大于 1200px）设置悬停效果。
• .menu > ul li:hover > ul: 当鼠标悬停在父级 li 上时，显示子菜单。
• @media screen and (max-width: 1200px): 媒体查询，针对移动端（屏幕宽度小于等于 1200px）设置样式。
• .menu ul.show: 在移动端，通过 JavaScript 添加 show 类来显示子菜单。

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);
  });
}

代码解释：

1. document.querySelector(".menu ul"): 选择 .menu 元素下的 ul 元素。
2. menu = menu.children: 获取 ul 元素的所有子元素（即顶层 li 元素）。
3. for 循环: 遍历每个顶层 li 元素。
4. menu[i].addEventListener("click", function() { ... }): 为每个 li 元素添加点击事件监听器。
5. menu[i].firstElementChild.classList.toggle("show"): 点击 li 元素时，切换其第一个子元素（即 ul 子菜单）的 show 类。

注意事项：

• 确保 CSS 中定义了 .show 类的样式，使其在移动端点击时显示子菜单（visibility: visible; opacity: 1;）。
• 这段代码假设每个需要展开的 li 元素，其第一个子元素是需要展开的 ul。如果HTML结构不一致，需要调整代码。
• 这段代码在点击父级菜单时，会同时触发子菜单的点击事件。如果需要阻止事件冒泡，可以使用 event.stopPropagation()。

优化建议

• 语义化 HTML: 使用 或 元素包裹菜单项文本，并使用 aria-expanded 属性来指示菜单的展开状态，提高可访问性。
• 事件委托: 将点击事件监听器添加到父级元素（例如 .menu ul），利用事件冒泡机制处理子元素的点击事件，减少事件监听器的数量，提高性能。
• 更灵活的展开/收起逻辑: 添加逻辑来判断当前是桌面端还是移动端，并根据不同的设备类型使用不同的事件处理方式。

总结

通过以上步骤，我们成功地使用原生 JavaScript、HTML 和 CSS 创建了一个响应式的多级下拉菜单，实现了桌面端的悬停效果和移动端的点击展开效果。记住，理解 CSS 样式中 visibility 和 opacity 属性的作用，以及 JavaScript 中事件监听和类切换的机制是关键。通过不断优化和改进，你可以构建出更加用户友好的导航菜单。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。