文章展开、收起功能

文章展开、收起功能

效果图

主要思路：

获取到文本信息，判断，如果超出50个字，就显示前50个字+“......”,点击查看，显示全文

主要代码：

<div class="essence">
    <p>文章收起、展开功能</p>
	<div class="essence_item">
		<div class="essence_item_content">
			<span id="conte">不忘初心，牢记使命，高举中国特色社会主义伟大旗帜，决胜全面建成小康社会，夺取新时代中国特色社会主义伟大胜利，为实现中华民族伟大复兴的中国梦不懈奋斗。</span>
			<p id="seeAbout">查看</p>
		</div>
	</div>
	<div class="essence_item">
		<div class="essence_item_content">
			<span id="conte">十八大以来的五年，是党和国家发展进程中极不平凡的五年。面对世界经济复苏乏力、局部冲突和动荡频发、全球性问题加剧的外部环境，面对我国经济发展进入新常态等一系列深刻变化，我们坚持稳中求进工作总基调，迎难而上，开拓进取，取得了改革开放和社会主义现代化建设的历史性成就。</span>
			<p id="seeAbout">查看</p>
		</div>
	</div>
	<div class="essence_item">
		<div class="essence_item_content">
			<span id="conte">五年来的成就是全方位的、开创性的，五年来的变革是深层次的、根本性的。五年来，我们党以巨大的政治勇气和强烈的责任担当，提出一系列新理念新思想新战略，出台一系列重大方针政策，推出一系列重大举措，推进一系列重大工作，解决了许多长期想解决而没有解决的难题，办成了许多过去想办而没有办成的大事，推动党和国家事业发生历史性变革。这些历史性变革，对党和国家事业发展具有重大而深远的影响。</span>
			<p id="seeAbout">查看</p>
		</div>
	</div>
</div>

<script type="text/javascript">
	$(function(){
		var onoff = false;
		$('.essence .essence_item').each(function(){
			var aa = $(this).find('#conte');
			var str = aa.text();
			if(str.length > 50){
			aa.text(str.substr(0,50)+'......');
		}
			var see =  $(this).find('#seeAbout');
			see.on('click',function(){
				if(onoff){
				aa.text(str.substr(0,50)+'......');
				see.text('查看');
			}else{
				aa.text(str);
				see.text('收起');
			}
			onoff =! onoff
			})
		})
	});
</script>