jquery实现内容的折叠与展开

一描述

1.内容多的时候是折叠的效果，如图

2.点击更多按钮，内容文字展开，效果如图

二代码实现

1.html代码

    
    
    


    


	

		

	   		 
这一段文字是可以折叠展开的，点击下面的“更多”就可以展开，点击下面的“折叠”就可以折叠
		
	
	

    

2.js代码， 最关键的

$(function() {
	var slideHeight = 45; // px 定义折叠的最小高度
	var defHeight = $('#wrap').height();
	if(defHeight >= slideHeight) {
		$('#wrap').css('height', slideHeight + 'px');
		$('#read-more').append('更多');
		$('#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;
		});
	}
});

3.css代码

#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;
}

亲测可行

github地址 https://github.com/kacha886/zhedie