多级菜单 jquery折叠菜单

已于 2023-11-11 10:25:39 修改
阅读量949 收藏 8
点赞数 1
分类专栏： 随手 文章标签： css jquery
于 2021-02-09 17:56:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhhhiiii/article/details/113773766
版权

多级jquery折叠菜单

前言

先上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Jquery多级菜单</title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script>
			$(document).ready(function() {
				//折叠菜单事件
				$(".panneltitle").click(function() {
					$(this).next().toggleClass("0m0"); 					//对当前panneltitle后面的pannelbox，添加辅助样式0m0
					$(this).parents('.pannelbox').toggleClass("0m0"); 	//对当前panneltitle的父元素pannelbox(如有)，添加辅助样式0m0	  
					$(".pannelbox").not('.0m0').slideUp(); 				//对没有0m0样式的pannelbox，全部收起来。当前panneltitle的父元素添加了0m0，不会收起来，当前菜单项的其它兄弟菜单节点正常显示。	  
					$(this).next().slideToggle(); 						//对panneltitle后面的pannelbox菜单内容进行收/展切换	
					$(this).next().toggleClass("0m0"); 					//对panneltitle后面的pannelbox去除辅助样式0m0，以免影响下一次菜单收/展
					$(this).parents('.pannelbox').toggleClass("0m0"); 	//对当前panneltitle的父元素pannelbox(如有),去除辅助样式0m0，以免影响下一次菜单收/展						
				});
			})
		</script>
		<style>
			/*折叠菜单  整个菜单盒子的样式 */
			.menubox {
				border: solid 2px #c3c3c3;
				border-radius: 4px;
				margin: 5px;
				background-color: #9cc3fc;
			}

			/*折叠菜单  （一级）菜单标题的样式 */
			.panneltitle {
				padding: 5px;
				text-align: center;
				border: solid 1px #c3c3c3;
				border-radius: 4px;
				
				margin: 0 auto;
			}

			/*折叠菜单  （二级）菜单盒子的样式 */
			.pannelbox {
				display: none;
				text-align: center;
				line-height: 25px;
				background-color: #fff;
				border: solid 1px #c3c3c3;
				border-radius: 4px;				
				margin: 0 auto;
			}

			/*折叠菜单  多级菜单中(二级)标题的样式*/
			.pannelbox  .panneltitle {
				background-color: #f9d7f5;
				width: 90%;
			}
			
			/*折叠菜单  多级菜单中(三级)标题的样式 */
			.pannelbox  .pannelbox  .panneltitle {
				background-color: #c5c1f9;
				width: 81%;
			}
			
			/*折叠菜单  多级菜单中(最后一级)标题的样式 */
			.pannelbox a:hover {
				color: #FFF;
				padding: 4px;
				text-decoration: none;
				background-color: #6ab66a;
			}
		</style>
	</head>
	<body>
		<div class="menubox">
			<div class="panneltitle">menu 1（一级）</div>
			<div class="pannelbox">
				<div class="panneltitle">menu 1-1（二级）</div>
				<div class="pannelbox">
					<a href="#" >1-1-1（三级）</a><br>
					<a href="#" >1-1-2（三级）</a>
				</div>
				<div class="panneltitle">menu 1-2（二级）</div>
				<div class="pannelbox">
					<a href="#" >1-2-1（三级）</a><br>
					<a href="#" >1-2-2（三级）</a>
				</div>
				<div class="panneltitle">menu 1-3（二级）</div>
				<div class="pannelbox">
					<a href="#" >1-3-1（三级）</a><br>
					<a href="#" >1-3-2（三级）</a><br>
					<a href="#" >1-3-3（三级）</a>
				</div>
			</div>
			
			<div class="panneltitle">menu 2（一级）</div>
			<div class="pannelbox">
				<div class="panneltitle">menu 2-1（二级）</div>
				<div class="pannelbox">
					<div class="panneltitle">menu 2-1-1（三级）</div>
					<div class="pannelbox">
						<a href="#" >2-1-1-1（四级）</a><br>
						<a href="#" >2-1-1-2（四级）</a>
					</div>
					<div class="panneltitle">menu 2-1-2（三级）</div>
					<div class="pannelbox">
						<a href="#" > 2-1-2-1（四级）</a><br>
						<a href="#" >2-1-2-2（四级）</a>
					</div>
				</div>
				<div class="panneltitle">menu 2-2（二级）</div>
				<div class="pannelbox">
					<a href="#" >menu 2-2-1（三级）</a><br>
					<a href="#" >menu 2-2-2（三级）</a>
				</div>
			</div>
			
			<div class="panneltitle">menu 3（一级）</div>
			<div class="pannelbox">
				<a href="#" >3-1（二级）</a><br>
				<a href="#" >3-2（二级）</a>
			</div>
			<div class="panneltitle">menu 4（一组）</div>
			<div class="pannelbox">
				<a href="#" > 4-1（二级）</a><br>
				<a href="#" >4-2（二级）</a>
			</div>
		</div>
	</body>
</html>

效果图

如下图所示：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

分析

主要使用jquery的toggleClass()进行菜单div项进行收/展。
多级菜单结构：
1、由一个div.panneltitle和紧接其后的div.pannelbox构成菜单项基本结构，panneltitle显示菜单标题，pannelbox放置下一级子菜单项。
2、每个div.pannelbox可以再放置多个菜单项基本结构。
3、最后一级的菜单项可以由单个div.panneltitle构成，也可以直接使用a构成。
代码分析：
1、当点击panneltitle时，对紧跟其后的pannelbox添加辅助样式0m0，对上级父元素pannelbox添加辅助样式0m0
2、没有0m0样式的pannelbox全部收起来。这样上级父元素pannelbox不受影响，同级其它兄弟菜单项照常显示，但其它兄弟菜单项的下一级菜单项也将收起来。
3、对当前panneltitle紧跟其后的pannelbox进行收/展。
4、对当前panneltitle紧跟其后的pannelbox去除辅助样式0m0，对上级父元素pannelbox去除辅助样式0m0，以免影响下一次菜单收/展

hhhhiiii
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery+CSS 可折叠的多级自动伸缩菜单
05-12
内容索引:脚本资源,CSS特效,折叠菜单,动感菜单　　jQuery+CSS 完成超酷的动感菜单，默认状态是折叠的，点击后开始动画展开，可以支持三级，黑色超酷风格，相信不少朋友会喜欢这种样式的，不过有一点不好就是，菜单项是写在JS里面的，这对以后扩展菜单有一定麻烦，不容易受程序控制，需要手动增删，多少有些不便。
jQuery多级树形分类折叠菜单.zip
05-24
jQuery多级树形分类折叠菜单基于jquery-1.7.2.min.js制作，json树形菜单。
Bootstrap - 详细实现导航栏组件源码，常见网站导航条效果完整代码（导航栏在移动设备的视图中是折叠的，具备响应式！）
王佳斌
02-27 758
导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap+JQuery 项目中，实现导航栏功能效果。
jQuery多级树形分类折叠菜单特效代码
03-20
jQuery多级树形分类折叠菜单基于jquery-1.7.2.min.js制作，json树形菜单。
【JQuery】使用JQuery实现城市两级或三级联动（下拉菜单）
每一名出色的架构师，必定是一位优秀程序员
03-07 4941
本文只要是通过使用JQuery实现城市（省、市、县）两级或三级联动，并使用下拉菜单展现。主要的代码如下： 1、在Controller中的代码： @RequestMapping(value="/tourAreaAdd.htm") public String toTourAreaAdd(HttpServletRequest request, Integer shoppingTourRulesId
jquery实现三级下拉菜单(三种方法) 折叠菜单
sinat_51673411的博客
03-02 1682
<!doctype html> <html> <head> <meta charset="utf-8"> <title>折叠菜单</title> <style type="text/css"> ul, li { margin: 0; padding: 0 } body {
JQuery实现折叠菜单。三个版本，写法。
m0_53881313的博客
05-25 4778
效果如图所示： 点击后展开菜单。同等高度，上面是因为截图原因。 代码如下： 版本1：练习用选择器写样式。代码很丑，后面有好看的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo.
使用jQuery实现折叠菜单效果
沐小侠
03-28 959
使用HTML+CSS+JS实现简单的折叠菜单效果
HTML+CSS伸缩式导航栏
weixin_45727272的博客
07-25 964
HTML+CSS伸缩式导航栏
jQuery多级折叠展开树形菜单代码
01-23
jQuery多级折叠展开树形菜单代码是一款简单实用的树形结构菜单插件，数据封装在data.js里面，直接修改调用即可。
jQuery折叠展开树形菜单代码
06-24
jQuery折叠展开树形菜单代码是一款多级子菜单折叠展开效果，列表菜单数据封装在data.js里面，直接修改调用即可。
jQuery树型多级手风琴菜单代码
06-05
这一款jQuery多级折叠手风琴菜单特效代码，通常用于网站后台管理系统左侧菜单，切换效果平滑好看。
CSS基础——1.CSS样式
weixin_66370632的博客
04-23 653
CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等。css的主要作用是定义网页的样式 CSS样式 1. 行内样式 行内样式：直接定义在 HTML 标签的 style 属性中
常见的css面试题（持续更新，欢迎补充）
清浅就是我的博客
04-22 527
总结面试常问的css相关面试题~通常遇见margin塌陷，是我们同时给父子元素都设置的margin， 此时元素不会像我们想的那样撑开，而是选取最大margin去显示。如何解决这个问题呢？ 给父元素设置浮动给父元素设置：overflow：hidden给元素设置为绝对定位一般来说：行内样式> id选择器 > class选择器 > 类型（标签）选择器和伪元素选择器 > 属性选择器.当上述只有一个的时候，很明显就能看出来谁的优先级高， 但是当同时存在id选择器 、 class选择器 、标签选择器 、 属
CSS引入的三种方式
weixin_59272777的博客
04-24 735
样式引入方式特点优点缺点适用场景内联样式（Inline Styles）在HTML元素内部使用style属性定义样式直观、快速，无需额外编写CSS代码不利于样式统一管理和复用，增加HTML文档复杂性对单个元素进行临时或快速样式调整，无需多页面复用内部样式表（Internal Stylesheets）在HTML文档的部分使用标签定义样式样式集中管理，HTML文档结构更清晰需在每个页面部分重复编写样式，不利于样式复用和共享。
【React】CSS 局部样式
最新发布
小秀的博客
04-26 158
的时候，如果 CSS 文件名包含 module，那么说明该 CSS 是一个局部 CSS 样式文件，类似于 vue 中的 scoped。
vuetify3.0+tailwindcss+vite最新框架
qq_43813351的博客
04-23 209
【代码】vuetify3.0+tailwindcss+vite最新框架。
css flex布局两个元素水平居中垂直居中
xiaohua616的博客
04-23 390
使用flex布局，让两个元素水平居中垂直居中，具体实现效果如下：
vue可折叠的多级菜单
08-14
回答: 可折叠的多级菜单在Vue中可以通过使用Element UI的组件来实现。首先，在home.vue文件中，可以使用el-menu和el-submenu组件来创建多级菜单。在获取到左侧菜单的数据后，使用v-for循环来渲染一级菜单，并设置对应的index值。然后，在el-submenu组件中，使用v-for循环渲染二级菜单，同时设置对应的index值。通过这种方式，就可以创建多级的可折叠菜单。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vue实现可折叠导航菜单~非常详细](https://blog.csdn.net/weixin_46370867/article/details/113273033)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *3* [vue iview后台系统可收缩式折叠菜单](https://blog.csdn.net/qq_42740797/article/details/122671194)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值