JS/jQuery实现默认显示部分文字点击按钮显示全部内容

253 阅读 0 评论 167 点赞

我是靠谱客的博主温婉毛豆，最近开发中收集的这篇文章主要介绍JS/jQuery实现默认显示部分文字点击按钮显示全部内容，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>JS实现默认显示部分文字，点击按钮显示全部</title> 
</head> 
<body> 
<div id="box"> 
<h2>民间机构提前3天预报大理地震 地震局称违法</h2> 
<p>17日大理州5.0级地震发生之后，在微博上一条曾在3天前就预测大理将发生5.0级地震的微博受到了很多网友的关注。</p> 
<p>记者联系上了微博博主，该博主表示，他是通过分析云南省地震局官方网站的数据得出的预报信息。对此，省地震局回应表示，地震局欢迎民间机构与地震局进行一些学术上的探讨和交流，但民间机构对外公开发布地震预报信息是违法的。</p> 
<p><strong>民间机构预报地震受网友追捧</strong></p> 
<p>“预计72小时内黑色圈圈内的地区都将有一次较强震感，初步锁定为5级地震，浅源，发生的位置主要是云南东北昭通（余震）、大理西南部和腾冲交界区域、和缅甸交界区域一线（地壳运动所致）云南巧家县和四川宁南县交界区域。”早在4月14日凌晨时分，微博名为“预报中心”的网民就在微博上发布了云南地震预报信息。该微博被网友转发了377次。在大理5.0级地震发生后，“小丛”等知名网友都转发了该微博。“跪了。”知名网友“小丛”在微博上表示。</p> 
<p>在大理5.0级地震发生之前，“预报中心”还陆续发布了3条地震预报的微博，并附有预报将发生地震的地图，及一张昆明地震监测点的原始数据图。</p> 
<p>这一微博得到了一些网友的转发及称赞。“顶，预报高手在民间，持续关注中。”网民“orfila2011”在评论中表示；“陕西蓝天救援队”官方微博也表示，民间在地震预测工作中有价值的经验方法，有关部门应给予足够的重视。</p> 
<p><strong>预报根据省地震局数据分析得出</strong></p> 
<p>该民间地震预报微博的资料显示，所在地位于湖北。“很久以前，该微博就已经在微博上播报地震预测信息，但一直很神秘。”有网友表示。昨日，记者通过微博联系上这一神秘民间地震预报机构。</p> 
<p>该民间机构是怎样获得地震预报信息的？该微博博主向记者表示，他们是根据云南省地震局官网云南地震数据共享中心查询到了云南省内的一些地震监测数据，分析得出的预报信息。记者发现，确实可以通过该网站查到云南各地震监测点的预处理数据。</p> 
<p>>该微博博主还透露，分析这些相关数据需要很多专业知识，但并不需要仪器。对于民间机构预报地震的动力，该博主表示“物质和精神都有”。对于其他信息，该博主不愿意更多透露。</p> 
<p><strong>省地震局：民间仅限于学术交流</strong></p> 
<p>“地震预测预报必须遵守相应的法律法规。”省地震局科学技术处处长、新闻发言人张俊伟在接受记者采访时表示，根据我国法律，任何个人或民间机构对外发布地震预报信息都是违法行为。</p> 
<p>国家《地震预报管理条例》规定，省、自治区、直辖市的地震长期预报、地震中期预报、地震短期预报和临震预报，由省、自治区、直辖市人民政府发布。</p> 
<p>对于这些民间的地震预报机构，张俊伟表示，云南省地震局一直都有所关注和了解。除了本次发布预报信息的“预报中心”外，这样的民间地震预报机构及人士还有很多。对于有网友提出能否加强官与民的合作交流。张俊伟表示，目前他个人并没有与这些民间机构取得过联系，但地震局对这些民间机构一直抱着包容与开放的态度，欢迎其与地震局进行学术探讨和交流。</p> 
<p>“但另一方面，对外公开发布地震预报信息始终是违法的。我们对这些公开发布地震预报信息的民间机构也很头痛，担心给社会带来不良的影响。”张俊伟认为，市民、网友不应采信民间机构发布的地震预报消息。</p> 
</div> 
<script> 
function show(){ 
var box = document.getElementById("box"); 
var text = box.innerHTML; 
var newBox = document.createElement("div"); 
var btn = document.createElement("a"); 
newBox.innerHTML = text.substring(0,200); 
btn.innerHTML = text.length > 200 ? "...显示全部" : ""; 
btn.href = "###"; 
btn.onclick = function(){ 
if (btn.innerHTML == "...显示全部"){ 
btn.innerHTML = "收起"; 
newBox.innerHTML = text; 
}else{ 
btn.innerHTML = "...显示全部"; 
newBox.innerHTML = text.substring(0,200); 
} 
} 
box.innerHTML = ""; 
box.appendChild(newBox); 
box.appendChild(btn); 
} 
show(); 
</script> 
</body> 
</html> 

jQuery插件：jquery.limittext.js

复制代码代码如下:

 
/** 
* demo: 
* 1.$("#limittext").limittext(); 
* 2.$("#limittext").limittext({"limit":1}); 
* 3.$("#limittext").limittext({"limit":1,"fill":"......","morefn":{"status":true}}); 
* 4.$("#limittext").limittext({"limit":1,"fill":"......","morefn":{"status":true,"moretext":"更多","lesstext":"隐藏部分","fullfn":function(){alert("more")},"lessfn":function(){alert("less")}}}) 
* 5.$("#limittext").limittext({"limit":1,"fill":"......","morefn":{"status":true}}).limit("all"); 
* @param {Object} opt 
* { 
* limit:30,//显示文字个数 
* fill:'...'//隐藏时候填充的文字 
* morefn:{ 
* status:false,//是否启用更多 
* moretext: "(more)",//隐藏部分文字时候显示的文字 
* lesstext:"(less)",//全部文字时候显示的文字 
* cssclass:"limittextclass",//启用更多的A标签的CSS类名 
* lessfn:function(){},//当文字为更少显示时候回调函数 
* fullfn:function(){}//当文字为更多时候回调函数 
* } 
* @author Lonely 
* @link http://www.liushan.net 
* @Download:http://down.liehuo.net 
* @version 0.2 
*/ 
jQuery.fn.extend({ 
limittext:function(opt){ 
opt=$.extend({ 
"limit":30, 
"fill":"..." 
},opt); 
opt.morefn=$.extend({ 
"status": false, 
"moretext": "(more)", 
"lesstext":"(less)", 
"cssclass": "limittextclass", 
"lessfn": function(){ 
}, 
"fullfn": function(){ 
} 
},opt.morefn); 
var othis=this; 
var $this=$(othis); 
var body=$this.data('body'); 
if(body==null){ 
body=$this.html(); 
$this.data('body',body); 
} 
var getbuttom=function(showtext){ 
return "<a href='javascript：;' class='" 
+opt.morefn.cssclass+"'>" 
+showtext 
+"<a>"; 
} 
this.limit=function(limit){ 
if(body.length<=limit||limit=='all'){ 
var showbody=body+(opt.morefn.status?getbuttom(opt.morefn.lesstext):""); 
}else{ 
if(!opt.morefn.status){ 
var showbody=body.substring(0,limit) 
+opt.fill; 
}else{ 
var showbody=body.substring(0,limit) 
+opt.fill 
+getbuttom(opt.morefn.moretext); 
} 
} 
$this.html(showbody); 
} 
this.limit(opt.limit); 
$("."+opt.morefn.cssclass).live("click",function(){ 
if($(this).html()==opt.morefn.moretext){ 
showbody=body 
+getbuttom(opt.morefn.lesstext); 
$this.html(showbody); 
opt.morefn.fullfn(); 
}else{ 
othis.limit(opt.limit); 
opt.morefn.lessfn(); 
} 
}); 
return this; 
} 
}); 