折叠、展开

最新推荐文章于 2022-04-24 07:31:31 发布

gundumw100

最新推荐文章于 2022-04-24 07:31:31 发布

阅读量230

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/gundumw100/article/details/69951833

版权

HTML 专栏收录该内容

77 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>展的折叠、展开</title>
<style> 
#content {
	font-size: 14px;
	width: 1000px;
	height: 500px;
	background: #eee;
	padding: 10px;
	border: 4px #ccc double;
	overflow: hidden;
}
#key {
	color: red;
	float: right;
	margin-top: 0px;
}
</style>
<script>
var s=50;
var minheight=50;
var maxheight=500;
function shoppingcat(){
	var key = document.getElementById("key").innerText;
	if(content.style.pixelHeight==0)content.style.pixelHeight=minheight;
	if(key=="展开"){
		content.style.pixelHeight+=s;
		if(content.style.pixelHeight<maxheight){
			setTimeout("shoppingcat();",1);
		}else{
			document.getElementById("key").innerText="关闭";
		}
	}else{
		content.style.pixelHeight-=s;
		if(content.style.pixelHeight>minheight){
			setTimeout("shoppingcat();",1);
		}else{
			document.getElementById("key").innerText="展开";
		}
	}
}
</script>
</head>
<body>
	<span id="key" οnclick="shoppingcat();">展开</span>
	<div id="content"> 
		源码爱好者
		<br><br>
		源码爱好者源码下载。
	</div>
</body>
</html>

gundumw100

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
折叠、展开

展的折叠、展开 #content { font-size: 14px; width: 1000px; height: 500px; background: #eee; padding: 10px; border: 4px #ccc double; overflow: hidden;}#key { color: red; float: right;
复制链接

扫一扫