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-data的三种用法
Apr 18 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jQuery实现简单日历效果
Jul 05 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
php设计模式 Delegation(委托模式)
2011/06/26 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
javascript类型转换示例
2014/04/29 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
vue随机验证码组件的封装实现
2020/02/19 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
Python中的推导式使用详解
2015/06/03 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
Python内置模块logging用法实例分析
2018/02/12 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
python中threading开启关闭线程操作
2020/05/02 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
我们的节日春节活动方案
2014/08/22 职场文书
政风行风评议工作总结
2014/10/21 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
三年级学生评语大全
2014/12/26 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书