开始免费使用
当前位置：首页 > JavaScript > 使用原生JavaScript实现鼠标滑过显示二级菜单

使用原生JavaScript实现鼠标滑过显示二级菜单

沿途有光
沿途有光
发布时间：2026-10-13| 3人浏览过
原创

实现鼠标悬停时展开二级导航菜单是Web前端常见的交互需求。本文将详细解析如何利用原生JavaScript监听鼠标移入事件，并通过DOM操作动态控制多个二级菜单块的显示与隐藏状态。

核心实现思路

该特效的核心逻辑在于事件监听与样式切换。当用户鼠标滑过一级导航菜单项时，触发特定的JavaScript函数。该函数负责执行以下动作：

  1. 定位目标：根据触发的菜单项标识（如ID或索引），找到对应的二级菜单容器。
  2. 清理状态：将所有相关的二级菜单容器设置为隐藏（display: none）。
  3. 激活显示：将目标二级菜单容器设置为显示（display: block）。

这种方法避免了复杂的CSS层级依赖，完全由JavaScript逻辑驱动交互状态。

代码实现细节

第1步：定义菜单切换函数

首先需要编写一个通用的处理函数，接收一个参数来区分当前操作的是哪个一级菜单。在示例中，使用数字作为标识符，并通过 switch 语句进行判断。

function selectTabMenu(i){
    switch(i){
        case 71: 
            // 显示第一个菜单，隐藏其余
            document.getElementById("TabMenuCon71").style.display="block";
            document.getElementById("TabMenuCon72").style.display="none";
            document.getElementById("TabMenuCon73").style.display="none";
            document.getElementById("TabMenuCon74").style.display="none";
            document.getElementById("TabMenuCon75").style.display="none";
            document.getElementById("TabMenuCon76").style.display="none";
            break;
        case 72:
            document.getElementById("TabMenuCon71").style.display="none";
            document.getElementById("TabMenuCon72").style.display="block";
            document.getElementById("TabMenuCon73").style.display="none";
            document.getElementById("TabMenuCon74").style.display="none";
            document.getElementById("TabMenuCon75").style.display="none";
            document.getElementById("TabMenuCon76").style.display="none";
            break;
        // 其他case类似...默认逻辑应确保只有一个菜单处于block状态
    }
}

关键点：必须同时设置其他菜单为 none，否则多个二级菜单会重叠显示。

第2步：HTML结构与事件绑定

在HTML中，一级导航菜单的每个列表项需绑定 onmouseover 事件，调用上述函数并传入对应的标识符。

<ul class="nav">
    <li><a href="#" onmouseover="selectTabMenu(71)">首页</a></li>
    <li><a href="#" onmouseover="selectTabMenu(72)">关于协会</a></li>
    <!-- 更多导航项 -->
</ul>

第3步：编写二级菜单HTML

二级菜单通常以无序列表呈现，每个菜单块拥有唯一的ID，以便JS精准定位。

<!-- 对应首页的二级菜单 -->
<ul id="TabMenuCon71" class="TabMenuCon">
    <li><a href="#">公告</a></li>
    <li><a href="#">信息</a></li>
</ul>

<!-- 对应关于协会的二级菜单 -->
<ul id="TabMenuCon72" class="TabMenuCon">
    <li>协会简介</li>
    <li>组织机构</li>
    <li>协会章程</li>
</ul>

第4步：配置CSS样式

为了配合JS的逻辑，CSS需要设定初始隐藏状态以及悬停视觉效果。

/* 一级导航基础样式 */
.navBar{
  height: 30px;
  background-color: #2B383E;
  text-align: center;
}
.nav li{
  float: left;
}
.nav li a{
  display: block;
  padding: 0 20px;
  height: 30px;
  line-height: 30px;
  text-decoration: none;
  color: #fff;
}
.nav li a:hover{
  background-color: #fff;
  color: #4DB6E7
}

/* 二级菜单基础样式 */
.TabMenuCon{
  clear: both;
  display: none; /* 默认全部隐藏 */
}
.TabMenuCon li{
  display: inline-block;
}

完整代码整合

以下是包含HTML、CSS和JavaScript的完整示例，可直接复制用于测试。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>水平导航-二级菜单</title>
 <style type="text/css">
 *{
  padding:0px;
  margin: 0px;
 }
 .navBar{
  height: 30px;
  background-color: #2B383E;
  text-align: center;
 }
 ul{
  list-style: none;
 }
 .nav li{
  float: left;
 }
 .nav li a{
  display: block;
  padding: 0 20px;
  height: 30px;
  line-height: 30px;
  text-decoration: none;
  color: #fff;
 }
 .nav li a:hover{
  background-color: #fff;
  color: #4DB6E7
 }
 .TabMenuCon{
  clear: both;
  display: none;
 }
 .TabMenuCon li{
  display: inline-block;
 }
 </style>
 <script type="text/javascript">
 function selectTabMenu(i){
  switch(i){
  case 71: 
  document.getElementById("TabMenuCon71").style.display="block";
  document.getElementById("TabMenuCon72").style.display="none";
  document.getElementById("TabMenuCon73").style.display="none";
  document.getElementById("TabMenuCon74").style.display="none";
  document.getElementById("TabMenuCon75").style.display="none";
  document.getElementById("TabMenuCon76").style.display="none";
  break;
  case 72:
  document.getElementById("TabMenuCon71").style.display="none";
  document.getElementById("TabMenuCon72").style.display="block";
  document.getElementById("TabMenuCon73").style.display="none";
  document.getElementById("TabMenuCon74").style.display="none";
  document.getElementById("TabMenuCon75").style.display="none";
  document.getElementById("TabMenuCon76").style.display="none";
  break;
  case 73: 
  document.getElementById("TabMenuCon71").style.display="none";
  document.getElementById("TabMenuCon72").style.display="none";
  document.getElementById("TabMenuCon73").style.display="block";
  document.getElementById("TabMenuCon74").style.display="none";
  document.getElementById("TabMenuCon75").style.display="none";
  document.getElementById("TabMenuCon76").style.display="none";
  break;
  case 74:
  document.getElementById("TabMenuCon71").style.display="none";
  document.getElementById("TabMenuCon72").style.display="none";
  document.getElementById("TabMenuCon73").style.display="none";
  document.getElementById("TabMenuCon74").style.display="block";
  document.getElementById("TabMenuCon75").style.display="none";
  document.getElementById("TabMenuCon76").style.display="none";
  break; 
  case 75:
  document.getElementById("TabMenuCon71").style.display="none";
  document.getElementById("TabMenuCon72").style.display="none";
  document.getElementById("TabMenuCon73").style.display="none";
  document.getElementById("TabMenuCon74").style.display="none";
  document.getElementById("TabMenuCon75").style.display="block";
  document.getElementById("TabMenuCon76").style.display="none";
  break; 
  case 76:
  document.getElementById("TabMenuCon71").style.display="none";
  document.getElementById("TabMenuCon72").style.display="none";
  document.getElementById("TabMenuCon73").style.display="none";
  document.getElementById("TabMenuCon74").style.display="none";
  document.getElementById("TabMenuCon75").style.display="none";
  document.getElementById("TabMenuCon76").style.display="block";
  break; 
  }
 }
 </script>
</head>
<body>
 <div class="navBar">
 <ul class="nav">
  <li><a href="#" onmouseover="selectTabMenu(71)">首页</a></li>
  <li><a href="#" onmouseover="selectTabMenu(72)">关于协会</a></li>
  <li><a href="#" onmouseover="selectTabMenu(73)">协会动态</a></li>
  <li><a href="#" onmouseover="selectTabMenu(74)">协会活动</a></li>
  <li><a href="#" onmouseover="selectTabMenu(75)">会员</a></li>
  <li><a href="#" onmouseover="selectTabMenu(76)">资源空间</a></li>
 </ul>
 
 </div>
 <div id="TabMenuCon">
 <ul id="TabMenuCon71" class="TabMenuCon">
  <li><a href="#">公告</a></li>
  <li><<a href="#">信息</a></li>
 </ul>
 <ul id="TabMenuCon72" class="TabMenuCon">
  <li>协会简介</li>
  <li>组织机构</li>
  <li>协会章程</li>
 </ul>
 <ul id="TabMenuCon73" class="TabMenuCon">
  <li>协会新闻</li>
  <li>活动预告</li>
  <li>求职招聘</li>
 </ul>
 <ul id="TabMenuCon74" class="TabMenuCon">
  <li>义务维修月</li>
  <li>平面设计活动</li>
  <li>程序设计活动</li>
  <li>户外拓展</li>
 </ul>
 <ul id="TabMenuCon75" class="TabMenuCon">
  <li>会员登录</li>
  <li>会员注册</li>
  <li>缴纳会费</li>
  <li>会员信息管理</li>
  <li>修改密码</li>
 </ul>
 <ul id="TabMenuCon76" class="TabMenuCon">
  <li>PS教程</li>
  <li>前端设计</li>
  <li>Flash教程</li>
 </ul>
 </div>
</body>
</html>

完成判断与注意事项

  • 视觉反馈：保存文件并在浏览器打开，将鼠标悬停在一级菜单“首页”、“关于协会”等链接上，观察下方是否相应出现不同的二级列表内容。
  • 状态互斥：检查确保同一时刻只有一个二级菜单处于可见状态。如果JS逻辑有误，可能导致多个菜单叠加。
  • 兼容性：该方法适用于所有现代主流浏览器。若需兼容极老版本IE，可能需要添加 onmouseout 事件以实现更流畅的退出体验，但基础悬停显示功能已完备。

以上就是利用原生JavaScript实现鼠标滑过显示二级菜单的详细内容，更多关于JavaScript菜单特效的资料请关注本站其它相关文章！

相关文章

相关标签: JavaScript 前端开发 DOM操作

免责声明：本文内容仅供参考，不代表本站观点。转载或引用请注明出处。

作者最新文章

全部文章

Python 相关产品和应用

全部下载
PythonSelenium
Selenium

Selenium

4.51.0 · Windows

用于浏览器自动化和 Web 测试的 Python 工具。

Python机器学习
scikit-learn

scikit-learn

1.9.1 · Windows

常用 Python 机器学习算法与模型评估工具库。

Python代码质量
Black

Black

26.10.1 · Windows

强调一致性的 Python 自动代码格式化工具。

Python代码质量
Ruff

Ruff

0.17.1 · macOS

由 Rust 编写的高速 Python 代码检查和格式化工具。

Pythonpytest
pytest

pytest

9.1.1 · Windows

简洁而强大的 Python 自动化测试框架。

PythonFastAPI
FastAPI

FastAPI

0.146.0 · Windows

高性能 Python API 框架，支持类型提示和自动接口文档。

PythonFlask
Flask

Flask

3.1.3 · Windows

轻量灵活的 Python Web 应用框架。

PythonDjango
Django

Django

6.1.2 · Windows

成熟的 Python Web 框架，适合构建内容站点和业务系统。

PythonSpyder
Spyder

Spyder

6.1.7 · Windows

面向科学计算与数据分析的 Python 集成开发环境。

PythonSciPy
SciPy

SciPy

1.18.1 · Windows

面向科学、工程和技术计算的 Python 算法库。