jQuery showHide动画效果

最新推荐文章于 2023-05-24 13:16:04 发布

YOUAFR

最新推荐文章于 2023-05-24 13:16:04 发布

阅读量802

点赞数

分类专栏： day04(jQuery)

本文链接：https://blog.csdn.net/YOUAFR/article/details/78345669

版权

day04(jQuery) 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<title>手风琴效果</title>
		<style>
			*{margin:0;padding:0;}
			ul, li{list-style: none;}
		</style>
	</head>
	<body>
		<ul class="menu">
			<li>
				<div>员工管理</div>
				<ul class="sub-menu">
					<li>个人信息</li>
					<li>....</li>
				</ul>
			</li>
			<li>
				<div>部门管理</div>
				<ul class="sub-menu">
					<li>部门信息</li>
					<li>....</li>
				</ul>
			</li>
			<li>
				<div>系统管理</div>
				<ul class="sub-menu">
					<li>系统信息</li>
					<li>....</li>
				</ul>
			</li>
		</ul>
	</body>
	<script src="js/jquery-1.12.4.min.js" ></script>
	<script>
		// 1. 所有的sub-menu隐藏
		$('.sub-menu').css('display', 'none');
		// 2. 给所有div添加点击事件
		$('div').on('click', function(){
			/*
			 * 方式一
			 * 效果就像直接修改display样式为block，就是没有效果直接显示
			 */ 
			//$($(this).siblings()[0]).show();
			/*
			 * 方式二
			 * 提供参数slow|normal|fast，区别显示的时长不一样
			 * slow:600ms/normal:400ms/fast:200ms
			 */
			//$($(this).siblings()[0]).show('fast');
			/*
			 * 方式三
			 * 直接提交显示需要的毫秒数
			 */
			//$($(this).siblings()[0]).show(2000);
			/*
			 * 方式四
			 * 使用第二个参数，表示动画播放完成后需要处理的额外事情
			 * 这个参数是一个函数，一般叫做回调函数，函数是由show方法
			 * 自己执行
			 */
			// isClose是动绑设置给当前标签，如果当前标签没有isClose或者isClose是假
			// 表示具体内容没有显示过，需要需要显示，显示完成需要修改isClose的状态
			// show(), show('slow/normal/fast'), show(1000)
			if (this.isClose || this.isClose == undefined){
				this.isClose = false;	// 打开
				$($(this).siblings()[0]).show(2000, function(){
					console.log('显示完成...');
				});	
			}else{
				this.isClose = true;	// 关闭
				$($(this).siblings()[0]).hide('slow', function(){
					console.log('关闭完成...');
				});
			}
			
		});
	</script>