JQuery实现折叠式菜单的详细代码


Posted in jQuery onJune 03, 2020

两种风格:

1:点菜单项,每个子菜单项都可显示

JQuery实现折叠式菜单的详细代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>30秦甜甜_实训13-2_2_180701802230_18计算机2班</title>
	</head>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
			list-style: none;
		}

		.menu-list {
			width: 300px;
			margin: 60px auto;
			border: 2px solid #bbffff;
		}

		.menu-head {
			background-color: #aaaaff;
			text-align: center;
			height: 100px;
			line-height: 100px;
		}

		.menu-body>li {
			height: 60px;
			line-height: 60px;
			text-align: center;
		}
	</style>
	<script src="../JQuery/jquery.js"></script>
	<script>
		$(function() {
			$(".menu-body").hide().eq(0).show();
			$(".menu-head").click(function() {
				// 1:
				$(this).next().toggle();
				// 2:
				// $(this).next().show();
			});
		});
	</script>
	<body>
		<div class="menu-list">
			<ul>
				<li>
					<h2 class="menu-head">学科</h2>
					<ul class="menu-body">
						<li>语文</li>
						<li>数学</li>
						<li>英语</li>
						<li>体育</li>
					</ul>
				</li>
				<li>
					<h2 class="menu-head">水果</h2>
					<ul class="menu-body">
						<li>苹果</li>
						<li>香蕉</li>
						<li>草莓</li>
						<li>西瓜</li>
					</ul>
				</li>
				<li>
					<h2 class="menu-head">蔬菜</h2>
					<ul class="menu-body">
						<li>番茄</li>
						<li>黄瓜</li>
						<li>生菜</li>
						<li>茄子</li>
					</ul>
				</li>
				<li>
					<h2 class="menu-head">肉类</h2>
					<ul class="menu-body">
						<li>鱼肉</li>
						<li>鸡肉</li>
						<li>牛肉</li>
						<li>猪肉</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>

运行结果图:

JQuery实现折叠式菜单的详细代码

2:点菜单项,仅当前子菜单项可显示,其余子菜单隐藏

JQuery实现折叠式菜单的详细代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>30秦甜甜_实训13-2_3_180701802230_18计算机2班</title>
	</head>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
			list-style: none;
		}

		.menu-list {
			width: 300px;
			margin: 60px auto;
			border: 2px solid #bbffff;
		}

		.menu-head {
			background-color: #aaaaff;
			text-align: center;
			height: 100px;
			line-height: 100px;
		}

		.menu-body>li {
			height: 60px;
			line-height: 60px;
			text-align: center;
		}
	</style>
	<script src="../JQuery/jquery.js"></script>
	<script>
		$(function() {
			$(".menu-body").hide().eq(0).show();
			$(".menu-head").click(function() {
				// 1:
				// $(this).next().toggle();
				// 2:
				$(this).next().show();
				var parentli = $(this).parent();
				var lis=parentli.siblings();
				lis.children(".menu-body").hide();
			});
		});
	</script>
	<body>
		<div class="menu-list">
			<ul>
				<li>
					<h2 class="menu-head">学科</h2>
					<ul class="menu-body">
						<li>语文</li>
						<li>数学</li>
						<li>英语</li>
						<li>体育</li>
					</ul>
				</li>
				<li>
					<h2 class="menu-head">水果</h2>
					<ul class="menu-body">
						<li>苹果</li>
						<li>香蕉</li>
						<li>草莓</li>
						<li>西瓜</li>
					</ul>
				</li>
				<li>
					<h2 class="menu-head">蔬菜</h2>
					<ul class="menu-body">
						<li>番茄</li>
						<li>黄瓜</li>
						<li>生菜</li>
						<li>茄子</li>
					</ul>
				</li>
				<li>
					<h2 class="menu-head">肉类</h2>
					<ul class="menu-body">
						<li>鱼肉</li>
						<li>鸡肉</li>
						<li>牛肉</li>
						<li>猪肉</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

运行结果图:

JQuery实现折叠式菜单的详细代码

总结

到此这篇关于JQuery实现折叠式菜单的详细代码的文章就介绍到这了,更多相关jquery 折叠式菜单内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

jQuery 相关文章推荐
jQuery自定义多选下拉框效果
Jun 19 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jquery实现上传图片功能
Jun 29 jQuery
jQuery中event.target和this的区别详解
Aug 13 jQuery
jQuery实现图片切换效果
Oct 19 jQuery
深入分析jQuery.one() 函数
Jun 03 #jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 #jQuery
jQuery实现倒计时功能完整示例
Jun 01 #jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 #jQuery
JQuery获得内容和属性方法解析
May 30 #jQuery
jQuery实现视频展示效果
May 30 #jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 #jQuery
You might like
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
php格式化金额函数分享
2015/02/02 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
浅谈php://filter的妙用
2019/03/05 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
Javascript 继承机制实例
2009/08/12 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
基于vue实现分页效果
2017/11/06 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
JS实现深度优先搜索求解两点间最短路径
2019/01/17 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
python使用PyFetion来发送短信的例子
2014/04/22 Python
Python实现购物车购物小程序
2018/04/18 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
党员学习型组织心得体会
2019/06/21 职场文书
爱国之歌(8首)
2019/09/29 职场文书
python实现高效的遗传算法
2021/04/07 Python
canvas多重阴影发光效果实现
2021/04/20 Javascript