擎天Lv19   
文本的展开与折叠     
<!DOCTYPE html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js文本段落展开和收拢效果</title>
    <script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
</head>
<body>
<style>
#container {
	margin: 0 auto;
	width: 600px;
	border: 1px solid #3bb2d0;
}
 
#wrap {
	position: relative;
	padding: 10px;
	overflow: hidden;
}
 
#read-more {
	padding: 5px;
	background: #fff;
	color: #333;
}
 
#read-more a {
	padding-right: 22px;
	no-repeat 100% 50%;
	font-weight: bold;
	text-decoration: none;
}
 
#read-more a: hover {
	color: #000;
}

</style>
<!---->
<script>
$(function() {
	var slideHeight = 45; // px 定义折叠的最小高度
	var defHeight = $('#wrap').height();
	if(defHeight >= slideHeight) {
		$('#wrap').css('height', slideHeight + 'px');
		$('#read-more').append('<a href="#">更多</a>');
		$('#read-more a').click(function() {
			var curHeight = $('#wrap').height();
			if(curHeight == slideHeight) {
				$('#wrap').animate({
					height: defHeight
				}, "normal");
				$('#read-more a').html('折叠');
			} else {
				$('#wrap').animate({
					height: slideHeight
				}, "normal");
				$('#read-more a').html('更多');
			}
			return false;
		});
	}
});
</script>

    <div id="container">
 
	<div id="wrap">
		<div>
	   		 <h1>这一段文字是可以折叠展开的,点击下面的“更多”就可以展开,点击下面的“折叠”就可以折叠</h1>
		</div>
	</div>
	<div id="read-more"></div>
    </div>
</body>
 
</html>



json卡片全屏化修改-发言不显示昵称
晨风机器人转卡片功能
有了卡片代码怎么使用?怎么发到群里?
 1  已被阅读了213次  楼主 2019-10-11 04:23:49
回复列表

回复:文本的展开与折叠

Powered by HadSky 7.3.4
© 2015-2020 PuYueTian
您的IP:3.234.245.121,2020-02-21 17:14:14,Processed in 0.15962 second(s).
Powered by HadSky
擎天QQxml、json代码、机器人配置交流论坛
已有0次打赏