如何利用js脚本制作动态菜单_js动态下拉菜单脚本编写与效果展示

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何利用js脚本制作动态菜单_js动态下拉菜单脚本编写与效果展示

2025-11-04

浏览次数：次

返回列表

使用HTML构建菜单结构，CSS设置样式并隐藏子菜单，J*aScript通过事件监听实现点击展开与收起功能，结合classList和过渡效果可提升交互体验。

如何利用js脚本制作动态菜单_js动态下拉菜单脚本编写与效果展示

实现一个动态下拉菜单并不复杂，只需要基础的 HTML、CSS 和 J*aScript 即可完成。下面详细介绍如何编写一个简洁高效的 J*aScript 动态下拉菜单，并附上完整代码与效果说明。

1. 菜单结构设计（HTML）

首先搭建基本的 HTML 结构，使用无序列表 ul 和列表项 li 构建菜单层级：

<div class="menu-container">
  <ul class="main-menu">
    <li>
      <span class="menu-title">产品</span>
      <ul class="sub-menu">
        <li><a href="#">手机</a></li>
        <li><a href="#">平板</a></li>
        <li><a href="#">笔记本</a></li>
      </ul>
    </li>
    <li>
      <span class="menu-title">服务</span>
      <ul class="sub-menu">
        <li><a href="#">技术支持</a></li>
        <li><a href="#">在线客服</a></li>
      </ul>
    </li>
  </ul>
</div>

2. 样式美化（CSS）

通过 CSS 控制菜单外观和隐藏/显示状态。子菜单默认隐藏，鼠标悬停或点击时再展示。

.menu-container {
  width: 200px;
  font-family: Arial, sans-serif;
}
<p>.main-menu > li {
position: relative;
}</p><p>.menu-title {
display: block;
padding: 10px;
background-color: #333;
color: white;
cursor: pointer;
text-align: left;
}</p><p>.menu-title:hover {
background-color: #555;
}</p><p>.sub-menu {
display: none; /<em> 默认隐藏 </em>/
list-style: none;
margin: 0;
padding: 0;
background-color: #f4f4f4;
border-left: 3px solid #007acc;
}</p><p>.sub-menu li a {
display: block;
padding: 8px 12px;
text-decoration: none;
color: #333;
font-size: 14px;
}</p><p>.sub-menu li a:hover {
background-color: #ddd;
}</p>

**3. 动态交互控制（J*aScript）**

使用 J*aScript 添加点击或悬停事件，实现子菜单的展开与收起。

以下是基于点击触发的 JS 脚本：

BrandCrowd

一个在线Logo免费设计生成器

200 查看详情 BrandCrowd

document.querySelectorAll('.menu-title').forEach(title => {
  title.addEventListener('click', function(e) {
    // 获取对应的子菜单
    const subMenu = this.nextElementSibling;
<pre class='brush:php;toolbar:false;'>// 切换显示状态
if (subMenu.style.display === 'block') {
  subMenu.style.display = 'none';
} else {
  subMenu.style.display = 'block';
}

// 可选：关闭其他已打开的菜单
document.querySelectorAll('.sub-menu').forEach(menu => {
  if (menu !== subMenu) {
    menu.style.display = 'none';
  }
});

}); });

如果你希望用鼠标悬停代替点击，只需将 'click' 改为 'mouseenter'，并配合 CSS 的 :hover 使用，或者在 JS 中统一管理移入移出事件。

4. 效果增强建议

让菜单更流畅自然，可以加入以下优化：

使用 classList.toggle() 配合 CSS 过渡动画，比直接操作 style.display 更优雅
添加过渡效果：在 CSS 中设置 max-height + overflow: hidden + transition 实现滑动展开
移动端适配：考虑点击穿透问题，避免误触
可访问性：支持键盘导航（Tab、Enter 键控制展开）

例如，用类控制显示：

// CSS
.sub-menu.active {
  display: block;
}
<p>// JS 修改部分
title.addEventListener('click', function() {
const subMenu = this.nextElementSibling;
subMenu.classList.toggle('active');
});</p>

基本上就这些。一个功能完整、样式清晰的动态下拉菜单就可以轻松实现。关键是结构清晰、事件绑定准确、样式控制得当。根据项目需求，还可以扩展多级菜单、异步加载菜单数据等高级功能。

以上就是如何利用js脚本制作动态菜单_js动态下拉菜单脚本编写与效果展示的详细内容，更多请关注其它相关文章！

# 文本框 # 仙游网络营销推广方案 # 宠物网站建设策划报告 # 小程序优化seo # 小店推广营销策略 # 南通推广网站建设哪家好 # 宣城网站优化推广报价 # 宁海宁波网站推广 # 吐鲁番爱采购seo排名 # 鞍山本地网站优化 # 孝感商务网站建设 # 鼠标 # 还可以 # 如果你 # 未接 # 道中 # js脚本制作教程 # 何为 # 加载 # 弹出 # 背景色 # ov # 移动端适配 # 异步加载 # ai # 平板 # ssl # js # html # java # javascript # css