页面导航：
→ 正文内容 部分显示全部
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
默认显示部分文字，点击按钮显示全部，类似这样的功能在一些特殊的地方会见到吧，下面与大家分享下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 = }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= 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. }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(); } });
您可能感兴趣的文章:
上一篇：下一篇：
最 近 更 新
热 点 排 行
12345678910本文欢迎转载，转载请注明：转载自中国学网： []
用户还关注
可能有帮助点击More按钮显示更多信息
有时候往往只希望显示一部分内容，如果需要查看更多信息，可以点击More或者更多按钮再显示，点击Less按钮，可以将多余的内容再收起来，本脚本就实现了这样的功能。
在网页&head&区添加以下代码
&link rel=&stylesheet& media=&all& type=&text/css& href=&more/more.css& /&
&script src=&more/click_toggle.js& type=&text/javascript&&&/script&
在网页&body&区添加以下代码
&h2&点击显示更多信息&/h2&
&div id=&outer&&
&div class=&holder&&
&h2&Alice's Adventures in Wonderland&/h2&
&p class=&bold&&by Lewis Carroll&/p&
&p class=&bold&&Down the Rabbit-Hole&/p&
&p&ALICE was beginning to get very tired of sitting by her sister on the bank and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, &and what is the use of a book,& thought Alice, &without pictures or conversations?'&/p&
&div class=&more&&
&i class=&show&&more »&/i&
&i class=&hide&&« less&/i&
&img src=&more/rabbit.jpg& alt=&rabbit& title=&& /&
&p&So she was considering, in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.&/p&
&p&There was nothing so ver nor did Alice think it so very much out of the way to hear the Rabbit say to itself &Oh dear! Oh dear! I shall be too late!& (when she thought it over afterwards it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but, when the Rabbit actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and was just in time to see it pop down a large rabbit-hole under the hedge.
&a href=&&&&/a&&/p&
&/div& &!-- end of more --&
&/div& &!-- end of holder --&
&div class=&holder&&
&h2&Through the Looking Glass&/h2&
&p class=&bold&&by Lewis Carroll&/p&
&p class=&bold&&Looking Glass House&/p&
&p&One thing was certain, that the white kitten had had nothing to do with it: -- it was the black kitten's fault entirely. For the white kitten had been having its face washed by the old cat for the last quarter of an hour (and bearing it pretty well, considering); so you see that it couldn't have had any hand in the mischief.&/p&
&div class=&more&&
&i class=&show&&more »&/i&
&i class=&hide&&« less&/i&
&img src=&more/glass.jpg& alt=&rabbit& title=&& /&
&p&The way Dinah washed her children's faces was this: first she held the poor thing down by its ear with one paw, and then with the other paw she rubbed its face all over, the wrong way, beginning at the nose: and just now, as I said, she was hard at work on the white kitten, which was lying quite still and trying to purr -- no doubt feeling that it was all meant for its good.&/p&
&p&But the black kitten had been finished with earlier in the afternoon, and so, while Alice was sitting curled up in a corner of the great arm-chair, half talking to herself and half asleep, the kitten had been having a grand game of romps with the ball of worsted Alice had been trying to wind up, and had been rolling it up and down till it had a and there it was, spread over the hearth-rug, all knots and tangles, with the kitten running after its own tail in the middle.&/p&
&/div& &!-- end of more --&
&/div& &!-- end of holder --&
修改网页&body&标签，添加OnLoad事件
&body onload=&clickMenu('outer','div','more')&&
下载"点击More按钮显示更多信息"
您可能还关注以下内容：
点击：0&&&&
点击：0&&&&
点击：0&&&&
点击：0&&&&
点击：0&&&&
点击：0&&&&
点击：0&&&&
点击：0&&&&
点击：0&&&&
点击：10562&&&&
点击：12449&&&&
点击：8040&&&&
点击：11075&&&&
点击：8607&&&&
点击：9029&&&&
点击：6937&&&&
点击：5582&&&&
点击：5467&&&&
合作网站：如何在网页上不显示要分享的内容，但点击分享按钮能将内容分享到腾讯微博去_百度知道
如何在网页上不显示要分享的内容，但点击分享按钮能将内容分享到腾讯微博去
猜测腾讯微博享链接 面各种参数 例标题
图片搜半没找
希望神帮帮我追加50
提问者采纳
清楚说意思 连接没找 参数信息 能
连接其按钮
通点击其按钮发送信息能调用JS 或者AJAX
提问者评价
来自：求助得到的回答
其他类似问题
腾讯微博的相关知识
您可能关注的推广回答者：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁问题补充&&
&quot.display=&quot.getElementById(&quot.display==&quot.style，否则就显示if(divObj通过div 的id获取中间div的对象var divObj=){
divObj.&none&divId&);如果div是显示的话就隐藏.}else{
divObj.display=&;
•回答
•回答
•回答
•回答
•回答
信息来源于互联网，不保证内容的可靠性、真实性及准确性，仅供参考，版权归原作者所有！Copyright &
Powered by}