JavaScript技巧：创建无限级网页折叠菜单效果

于 2023-09-29 06:08:02 发布
阅读量347 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript 开发语言 ecmascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ByteZenith/article/details/133405460
js 专栏收录该内容
440 篇文章 ¥59.90 ¥99.00
订阅专栏
本文介绍了如何使用JavaScript创建无限级网页折叠菜单效果。通过HTML结构、事件委托和CSS样式实现多层级菜单的展开与折叠功能，允许用户点击菜单项时动态操作子菜单。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在本文中，我将向您展示如何使用JavaScript实现无限级网页折叠菜单效果。这种效果可以让您创建具有多层级的可折叠菜单，以便在用户点击菜单项时展开或折叠其子菜单。

首先，让我们创建一个基本的HTML结构，其中包含一个具有层级结构的菜单。每个菜单项将包含一个标题和一个子菜单的容器。以下是一个示例HTML结构：

<div id="menu">
  <ul>
了解本专栏 订阅专栏 解锁全文
JavaScript折叠菜单实现
煮酒客的博客
11-22 1404
- html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href
js实现可折叠的列表或菜单
最新发布
weixin_44134816的博客
06-03 331
这段代码的核心功能是根据父容器的高度和子元素的布局情况，动态计算并更新一个列表的折叠点。当列表的高度超过一定阈值（77像素）且子元素数量大于3时，通过一系列计算和判断，确定一个合适的折叠位置，并将该位置信息存储在组件的状态中，以便后续使用。这种逻辑通常用于实现可折叠的列表或菜单，以优化页面布局和提升用户体验。
JS折叠菜单
weixin_34117522的博客
11-03 221
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta h
JavaScript-实例-折叠菜单
深度安全实验室
12-05 1119
JavaScript-实例-折叠菜单
js实现的折叠式菜单
wangyining070205的博客
06-11 4853
用js实现的折叠式菜单
JS 折叠菜单
sinat_16664531的专栏
04-12 423
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-a...
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
10-23
特别是在具有层级结构的数据展示时，如文件系统、目录结构或复杂的导航菜单，无限级折叠菜单（类似树形菜单）能够提供良好的用户体验。这篇文章将探讨如何使用JavaScript来实现这样的功能。 首先，我们需要理解这个...
JavaScript实现无限级网页折叠菜单：树形菜单教程
本文将详细介绍如何使用JavaScript实现一个具有无限级展开与折叠功能的网页折叠菜单，类似于常见的树形菜单。这种效果在管理界面、后台左侧导航以及产品列表展示中非常实用，尤其适用于需要深度层次结构的数据展示...
js无限级折叠菜单精简版
10-28
本次解析的案例是一个简单的JavaScript实现的无限级折叠菜单，它允许开发者通过纯JavaScript来实现菜单的折叠和展开功能，而不需要依赖于jQuery库。 无限级折叠菜单通常包含以下几个关键知识点： 1. HTML结构：...
js折叠菜单
の楓葉ぱ飄淚
12-06 483
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">       New Document    //菜单隐藏与显示  function SwitchMenu(obj){   if(document.getElementById){   var el
JS实现折叠菜单
12-17 2105
var bV=parseInt(navigator.appVersion);var NS4=(document.layers) ? true : false;var IE4=((document.all)&&(bV>=4))?true:false;var ver4 = (NS4 || IE4) ? true : false;function expandIt(){return}function
js实现精致折叠菜单
07-30
<head> <SCRIPT src="images/tree_naviIndex.js" type=text/javascript></SCRIPT> <style> #mainLeft { FONT-SIZE: 12px; FLOAT: left; WIDTH: 218px; HEIGHT: auto; BACKGROUND-COLOR: #f2f6fb;padding:10px 0px 10px 5px;margin:0px; } #mainLeft li A { width:150px; COLOR: #263d4f; TEXT-DECORATION: none; overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; } #mainLeft li A:hover { COLOR: #ff6500; TEXT-DECORATION: underline } #mainLeft UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none } #mainLeft UL LI { MARGIN: 0px; LIST-STYLE-TYPE: none } #mainLeft ul li:not(p) { clear: both; } #mainLeft ul li:not(p) a { max-width:130px; float: left; } #mainLeft ul li:not(p):after { content: "..."; float: left; width: 10px; padding-left:2px; color: #000; } </style> </head> <body> <DIV id=mainLeft> <DIV id=room0><IMG src="images/root.gif" align=absMiddle> <A href="http://bbs.big-bit.com/">技术论坛首页</A> </DIV> <DIV id=room5><IMG id=minus_5 onclick=showRoom(5); src="images/_minus1.gif" align=absMiddle><IMG id=folderOpen_5 src="images/folderopen.gif" align=absMiddle> <A onclick=showRoom(5); href="#">磁性元器件研发及应用技术区</A></DIV> <DIV id=file5 style="DISPLAY: block"> <UL> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=118">电源供应器技术</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=104">电子变压器技术</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=115">电感与线圈技术</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=116">磁性材料、配件、辅助材料技术</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=141">生产、品质、制程与企业管理</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line2.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=120">紧急求助区</A> </LI> </UL> </DIV> <DIV id=room10><IMG id=minus_10 onclick=showRoom(10); src="images/_minus1.gif" align=absMiddle><IMG id=folderOpen_10 src="images/folderopen.gif" align=absMiddle> <A onclick=showRoom(10); href="#">资料上传下载区</A></DIV> <DIV id=file10 style="DISPLAY: block"> <UL> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=106">电源供应器资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=117">电子变压器资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=119">电感与线圈资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=134">磁性材料与配件、辅助材料资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=135">安规、标准资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=142">生产、品质、制程与企业管理资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=144">磁性元器件应用领域资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line2.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=143">电子工程师必备知识</A> </LI> </UL> </DIV> <DIV id=room6><IMG src="images/_minus1.gif" name="minus_6" align=absMiddle id=minus_6 onclick=showRoom(6);><IMG src="images/folderopen.gif" name="folderOpen_6" align=absMiddle id=folderOpen_6> <A onclick=showRoom(6); href="#">原创精华帖展示区</A></DIV> <DIV id=file6 style="DISPLAY: block"> <UL> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=137">电源供应器精华<SPAN style="COLOR: #ff6500">[新]</SPAN></A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=138">电子变压器精华<SPAN style="COLOR: #ff6500">[新]</SPAN></A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=139">电感与线圈精华<SPAN style="COLOR: #ff6500">[新]</SPAN></A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line2.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=140" target=_blank>磁性材料精华<SPAN style="COLOR: #ff6500">[新]</SPAN></A> </LI> </UL> </DIV> <DIV id=room3><IMG id=plus_3 onclick=showRoom(3); src="images/_plus1.gif" align=absMiddle><IMG id=folder_3 src="images/folder.gif" align=absMiddle> <A onclick=showRoom(3); href="#">休闲灌水</A></DIV> <DIV id=file3 style="DISPLAY:none"> <UL> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=131">企业评说</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=128">市场讨论</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=110">职场心情</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=109">自由天空</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line2.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=133">供求合作</A> </LI> </UL> </DIV> <DIV id=room7><IMG src="images/_minus1.gif" name="minus_7" align=absMiddle id=minus_7 onclick=showRoom(7);><IMG src="images/folderopen.gif" name="folderOpen_7" width="16" height="16" align=absMiddle id=folderOpen_7> <A onclick=showRoom(7); href="#">站务管理</A></DIV> <DIV id=file7 style="DISPLAY: block"> <UL> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=43359">重要通知</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=38376">积分奖品兑换帖（修改）</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=32595">收集建议</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=38989">大比特论坛诚征版主！</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=44187">论坛版面调整和相关功能完善公告</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=49020">有关上传附件容量公告</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=37757">大比特论坛版主的权利与职责</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=43627">关于恶意刷分取消兑奖的公示</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line2.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=37758">版主奖罚制度</A> </LI> </UL> </DIV> <DIV id=file8> <UL> <LI><IMG src="images/_line2.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=32595">建议信箱区</A> </LI> </UL> </DIV> </DIV> </body> 实现二级树状菜单，兼容性好。
无限极菜单 js
02-17
无限极菜单，js实现，可横向、纵向 具体参见源码，希望大虾们多给给意见
js折叠菜单效果
07-16
折叠菜单效果 js 折叠菜单 js折叠菜单 没有多余代码，纯粹的菜单折叠效果！
简单的Javascript折叠菜单
11-07
简单的Javascript折叠菜单,很简单使用的
JS折叠菜单树形菜单
04-01
本例是JS+CSS的折叠式菜单，几年前刚学JS的时候写的了，我还是菜鸟的时候写的，希望对其他的菜鸟有所帮助，能用就用吧。
JS 实现折叠式菜单
JAVAZHICHIZHE的专栏
08-01 541
最近在做一个网站系统， 参考网站上面有一个折叠式的菜单， 觉得好玩查看了一下它的源代码学习了一个。 以下是我的源代码： 折叠式菜单 折叠式下拉菜单 搜索引擎站点 新浪 ...
JS实现网页动态折叠菜单
热门推荐
李阳阳的博客
09-12 1万+
最近做了一个多级菜单列表动态展示的功能，其中用到了vue.js渐进式框架、aui.css等，在此记录一下，也便于自己日后总结。 说明：vue.js不是必须要用的，因为我们项目中页面用的都是vue，因此我才用的vue方式进行数据绑定，也可以用其他方式实现。
JavaScript可折叠弹出式菜单
清竹贮香
04-04 932
可折叠弹出式菜单 body {background-color: #FFF;color: #000;} div {margin-bottom: 10px; float:left} ul.menu {display: none;list-style-type: none;margin-top: 5px;} a.menuLink {font-size: 16px;font-we
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值