擎天Lv51   
文本的展开与折叠     
<!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>

 1  已被阅读了568次  楼主 2019-10-11 04:23:49
回复列表
Powered by HadSky 7.4.3
© 2015-2020 擎天论坛
您的IP:3.92.74.105,2020-09-28 13:53:47,Processed in 0.43748 second(s).
Powered by HadSky
已有0次打赏




免责声明
1、本帖所有言论和图片属于发帖人个人意见,与本论坛立场无关;
2、本贴由该帖子作者发表,该帖子作者与擎天论坛享有帖子相关版权;
3、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和擎天论坛的同意;
4、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任;
5、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责;
6、如本帖侵犯到任何版权问题,请告知本站,本站将及时删除并致以最深的歉意;
7、擎天论坛管理员和版主有权不事先通知发贴者而删除本文。
8、帖子内容如果包含各种违法、违规、欺诈、无效等问题,
点我举报

侵删:admin@qtxml.cn
快捷回复