文章收起与展开效果的实现
2016-03-06 10:23
357 查看
方式一(display):
方式二(substring):
<style> div{width:800px;} p{text-indent:2em;} #box1{display:none;} </style> <div id="box1"> <p>从基层上看去,中国社会是乡土性的。我说中国社会的基层是乡土性的,那是因为我考虑到从这基层上曾长出一层比较上和乡土基层不完全相同的社会,而且在近百年来更在东西方接触边缘上发生了一种很特殊的社会。这些社会的特性我们暂时不提,将来再说。我们不妨先集中注意那些被称为土头土脑的乡下人。他们才是中国社会的基层。</p> <p>我们说乡下人土气,虽则似乎带着几分藐视的意味,但这个土字却用得很好。土字的基本意义是指泥土。乡下人离不了泥土,因为在乡下住,种地是最普通的谋生办法。在我们这片远东大陆上,可能在很古的时候住过些还不知道种地的原始人,那些人的生活怎样,对于我们至多只有一些好奇的兴趣罢了。以现在的情形来说,这片大陆上最大多数的人是拖泥带水下田讨生活的了。我们不妨缩小一些范围来看,三条大河的流域已经全是农业区。</p> <a href="#">收起</a> </div> <div id="box2"> <p>从基层上看去,中国社会是乡土性的。我说中国社会的基层是乡土性的,那是因为我考虑到从这基层上曾长出一层比较上和乡土基层不完全相同的社会,而且在近百年来更在东西方接触边缘上发生了一种很特殊的社会。这些社会的特性我们暂时不提,将来再说。我们不妨先集中注意那些被...</p> <a href="#">展开</a> </div> <script type="text/javascript" > $('#box1').find('a').click(function(e) { $('#box1').hide(); $('#box2').show(); }); $('#box2').find('a').click(function(e) { $('#box2').hide(); $('#box1').show(); }); </script>
方式二(substring):
<style> div{width:800px;} p{text-indent:2em;} </style> <div id="box"> <p>从基层上看去,中国社会是乡土性的。我说中国社会的基层是乡土性的,那是因为我考虑到从这基层上曾长出一层比较上和乡土基层不完全相同的社会,而且在近百年来更在东西方接触边缘上发生了一种很特殊的社会。这些社会的特性我们暂时不提,将来再说。我们不妨先集中注意那些被称为土头土脑的乡下人。他们才是中国社会的基层。</p> <p>我们说乡下人土气,虽则似乎带着几分藐视的意味,但这个土字却用得很好。土字的基本意义是指泥土。乡下人离不了泥土,因为在乡下住,种地是最普通的谋生办法。在我们这片远东大陆上,可能在很古的时候住过些还不知道种地的原始人,那些人的生活怎样,对于我们至多只有一些好奇的兴趣罢了。以现在的情形来说,这片大陆上最大多数的人是拖泥带水下田讨生活的了。我们不妨缩小一些范围来看,三条大河的流域已经全是农业区。</p> </div> <a href="#">收起</a> <script type="text/javascript" > var str=$('#box').html(); var key=true; $('a').click(function(e) { if(key==true){ $('#box').html(str.substring(0, 150)+'...'); $('a').html('展开'); key=false; } else{ $('#box').html(str); $('a').html('收起'); key=true; } }) </script>
相关文章推荐
- UI进阶第八天,触摸事件,画板步骤
- 大数相乘
- STL与泛型编程<一>:容器的共通能力和共通操作
- Android中的欢迎界面(启动界面)
- 电源管理事件
- 51nod 1384 全排列
- leetcode:Best Time to Buy and Sell Stock 【Java】
- python实现二叉树和它的七种遍历
- c# 线程池RegisterWaitForSingleObject的一个Demo
- Java 回顾笔记_多线程_1
- 泛型的使用
- 欢迎使用CSDN-markdown编辑器
- 常用函数
- caffe使用小细节
- 画图学习
- linux下的二进制文件的编辑和查看
- int的各种移植性变种
- web service 的handler使用
- Mint update W: GPG error
- 理解setRetainInstance