【每天一个JQuery特效】以卷帘效果展开或收缩被选择的元素（2）

最新推荐文章于 2019-01-19 08:33:00 发布

weixin_34236869

最新推荐文章于 2019-01-19 08:33:00 发布

阅读量340

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/rhymo/blog/1831942

版权

为什么80%的码农都做不了架构师？>>>

具体效果如下图：

主要代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>以卷帘效果展开或收缩被选择的元素</title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#mytogglebtn").click(function(){
					//响应单击按钮收缩（或展开）内容
					$("#div1").slideToggle(2000);
					var t = $("#mytogglebtn").text() == "收缩内容"?"展开内容":"收缩内容";
					$("#mytogglebtn").text(t);
				});
				$("#myhidebtn").click(function(){
					//对单击收缩内容按钮的响应
					$("#div1").slideUp();
				});
				$("#myshowbtn").click(function(){
					//对单击展开内容按钮的响应
					$("#div1").slideDown();
				});
			});
		</script>
	</head>
	<body>
		<button id="mytogglebtn" style="width: 130px;">收缩内容</button>
		<button id="myhidebtn" style="width: 130px;">收缩内容</button>
		<button id="myshowbtn" style="width: 130px;">展开内容</button>
		<div id="div1">
			1.dgsofgijogjeroj<br />
			2.dgsofgijogjeroj<br />
			3.dgsofgijogjeroj<br />
			4.dgsofgijogjeroj<br />
			5.dgsofgijogjeroj<br />
			6.dgsofgijogjeroj<br />
			7.dgsofgijogjeroj<br />
		</div>
	</body>
</html>

在上面的代码中，如果元素已经显示，slideUp()方法则以卷帘式的滑动效果隐藏备选元素。slideUp（）语法声明如下: