jquery实现点击查看更多内容控制段落文字展开折叠效果


Posted in Javascript onAugust 06, 2015

本文实例讲述了jquery实现点击查看更多内容控制段落文字展开折叠效果。分享给大家供大家参考。具体如下:

这里使用jQuery实现的文字展开折叠效果,点击文字后文字内容会完整的显示出来,控制段落来显示文字,不需要的时候,可以再次点击后将内容折叠起来,也就是隐藏了一部分内容。点击查看更多的功能,在很多大网站都有在用,像一些电影简介、产品介绍有时候为了页面的布局效果,常常默认是隐藏了一部分,用户想看的时候可以点击后展开。

运行效果如下图所示:

jquery实现点击查看更多内容控制段落文字展开折叠效果

jquery实现点击查看更多内容控制段落文字展开折叠效果

具体代码如下:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery文本段落展开和折叠效果</title>
<style>
html,body,div,h2,p{margin: 0;padding: 0;}
html{font: 1em Arial, Helvetica, sans-serif;color: #444;}
a{color: #0087f1;}
p{margin-bottom: 5px;}
#container{margin: 0 auto;width: 600px;}
#container h2{font-size: 20px;color: #0087f1;}
#wrap{position: relative;padding: 10px;overflow: hidden;}
#gradient{width: 100%;height: 35px;background: url() repeat-x;position: absolute;bottom: 0;left: 0;}
#read-more{padding: 5px;border-top: 4px double #ddd;background: #fff;color: #333;}
#read-more a{padding-right: 22px;background: url() no-repeat 100% 50%;font-weight: bold;text-decoration: none;}
#read-more a: hover{color: #000;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
 var slideHeight = 75; // px
 var defHeight = $('#wrap').height();
 if(defHeight >= slideHeight){
  $('#wrap').css('height' , slideHeight + 'px');
  $('#read-more').append('<a href="#">点击查看更多。。</a>');
  $('#read-more a').click(function(){
   var curHeight = $('#wrap').height();
   if(curHeight == slideHeight){
    $('#wrap').animate({
     height: defHeight
    }, "normal");
    $('#read-more a').html('点击隐藏');
    $('#gradient').fadeOut();
   }else{
    $('#wrap').animate({
     height: slideHeight
    }, "normal");
    $('#read-more a').html('点击查看更多。。');
    $('#gradient').fadeIn();
   }
   return false;
  });  
 }
});
</script>
</head>
<body>
 <div id="container">
  <h1>jQuery 控制段落文字展开折叠,点击查看更多的功能</h1>
  <h2>About Billabong</h2>
  <div id="wrap">
   <div>
    <p>Gordon developed his own stitching technique, which made the garments more durable, cost effective and less labor intensive. He employed machinists, moved the operation into a factory, set up a distribution network and sponsored a team of renowned Australian surfers. The business thrived.</p>
    <p>Since those beginnings, Billabong has expanded its product range to include boardsport products such as wetsuits, watches, surfboards, snowboard outerwear and skateboarding apparel.</p>
   </div>
   <div id="gradient"></div>
  </div>
  <div id="read-more"></div>
 </div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
线路分流自动跳转代码;希望对大家有用!
Dec 02 Javascript
js实现的折叠导航示例
Nov 29 Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
简单的js计算器实现
Oct 26 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
微信小程序实现流程进度的图样式功能
Jan 16 Javascript
Vue3.0数据响应式原理详解
Oct 09 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 #Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 #Javascript
drag-and-drop实现图片浏览器预览
Aug 06 #Javascript
js简单实现标签云效果实例
Aug 06 #Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 #Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 #Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 #Javascript
You might like
php中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
php下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
JavaScript 变量作用域分析
2011/07/04 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
python抓取网页图片示例(python爬虫)
2014/04/27 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
Python chardet库识别编码原理解析
2020/02/18 Python
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
经贸日语毕业生自荐信
2013/11/03 职场文书
保护环境建议书300字
2014/05/13 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
研修心得体会
2014/09/04 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript
详解如何使用Nginx解决跨域问题
2022/05/06 Servers
利用Java连接Hadoop进行编程
2022/06/28 Java/Android