jQuery点击“阅读全文”展开查看全部内容

‌这是一款很实用的jQuery点击阅读全文展开查看全部内容代码，默认显示文章的一部分内容，点击“阅读全文”展示所有文章内容显示更多文字。

首先引入js文件

<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>

‌‌这个一般网站都有，不用二次引用。

html

<div class="content">网页内容</div>
<div class="readall_box" >
	<div class="read_more_mask"></div>
	<a class="read_more_btn" target="_self">阅读全文</a>
</div>

‌‌css

/*阅读全文*/
.readall_box { position: relative; z-index: 9999; padding: 0 0 25px; margin-top: -200px; text-align: center; }
.readall_box .read_more_mask { height: 200px; background: -moz-linear-gradient(bottom, rgba(255,255,255,0.1), rgba(255,255,255,0)); background: -webkit-gradient(linear, 0 top, 0 bottom, from(rgba(255,255,255,0)), to(#fff)); background: -o-linear-gradient(bottom, rgba(255,255,255,0.1), rgba(255,255,255,0)) }
.read_more_btn { cursor: pointer; font-size: 15px; color: #22ac38; background: #fff; background: linear-gradient(to bottom, transparent 0%, white 100%);border-radius: 20px; border: 1px solid #22ac38; line-height: 38px; width: 200px; display: block; margin: auto; transition: .5s; position: relative; text-indent: -.5em; }
.read_more_btn:hover { background: #22ac38; color: #fff; }

‌‌js

/*阅读全文*/
$(function(){
	var widHeight = $(window).height();
	var artHeight = $('.article_content').height();
	if(artHeight>(widHeight*2.5)){
		$('.article_content').height(widHeight*2.5-285).css({'overflow':'hidden'});
		var article_show = true;
		$('.read_more_btn').on('click',bindRead_more);
	}else{
		article_show = true;
		$('.readall_box').hide().addClass('readall_box_nobg');
	}
	function bindRead_more(){
		if(!article_show){
			$('.article_content').height(widHeight*2.5).css({'overflow':'hidden'});
			$('.readall_box').show().removeClass('readall_box_nobg');
			article_show = true;
		}else{
			$('.article_content').height("").css({'overflow':'hidden'});
			$('.readall_box').show().addClass('readall_box_nobg');
			$('.readall_box').hide().addClass('readall_box_nobg');
			article_show = false;
		}
	}
})