JavaScript+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="http://www.codefans.net/ajaxjs/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 控制段落文字展开折叠，点击查看更多的功能
<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>

JS点击查看更多内容 控制段落文字展开折叠的更多相关文章

  1. jquery 点击查看更多箭头变化，文字变化,超出带滚动条。

    从网上好了好久,没找到自己要的,自己写了一下. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  2. 利用ScrollView滑动属性实现点击查看更多

    利用ScrollView的滚动实现点击查看更多 效果图 更新内容布局 <ScrollView android:id="@+id/sv_des" android:layout_ ...

  3. angular点击查看更多（简单demo）

    今天来跟大家分享一个小的demo,一般网页浏览到底部的时候会有一个点击加载更多的按钮,之前一直纠结怎么写这个,今天学习angular时发现可以用组件来实现这么一个小的效果,大家有兴趣的话可以看一下. ...

  4. JS点击显示隐藏内容

    JS点击显示隐藏密码 思路:获取元素,判断点击,如果DIV显示就隐藏,如果DIV隐藏就显示出来. 1 if(DIV是显示的){ 2 div.style.display='none'; 3 } 4 el ...

  5. js点击按钮复制内容到粘贴板

    复制内容到粘贴板,就是要选择需要复制的内容并执行document.execCommand("copy")命令: //复制内容到粘贴板 function copyToClipboar ...

  6. jQ-点击查看更多

    <style type="text/css"> .hi { width: 200px; height: 18vw; background-color: pink; fo ...

  7. HTML5--》点击显示隐藏内容

    <details>浏览器支持比较差,可以用JavaScript实现这种功能. <!doctype html> <html> <head> <met ...

  8. 【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)

    参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...

  9. JS脚本实现CSDN免登陆免关闭广告插件自动展开“阅读更多”内容

    最近在CSDN查资料,总是弹出以下弹窗,然后就自动跳转到登录页面,蛋疼! 于是重新捣腾了一下,修改了原来的脚本,最新的脚本代码如下: 温馨提示:在打开CSDN页面后立刻执行以下脚本即可免登陆免关闭广告 ...

随机推荐

  1. FreeMarker数据模板引擎全面教程mark

    http://blog.csdn.net/fhx007/article/details/7902040/#comments 以下内容全部是网上收集: FreeMarker的模板文件并不比HTML页面复 ...

  2. 简单题（bzoj 1683）

    Description 你有一个N*N的棋盘,每个格子内有一个整数,初始时的时候全部为0,现在需要维护两种操作: 命令 参数限制 内容 1 x y A 1<=x,y<=N,A是正整数 将格 ...

  3. JS实现限行

    一.JS代码实现 1. 机动车辆限行如下图所示: 具体详情请访问:http://www.bjjtgl.gov.cn/zhuanti/10weihao/index.html 2.JS代码实现 <! ...

  4. 死磕 java同步系列之自己动手写一个锁Lock

    问题 (1)自己动手写一个锁需要哪些知识? (2)自己动手写一个锁到底有多简单? (3)自己能不能写出来一个完美的锁? 简介 本篇文章的目标一是自己动手写一个锁,这个锁的功能很简单,能进行正常的加锁. ...

  5. Java面向对象练习题

    1.猜数字游戏: 一个类A有两个成员变量v.num,v有一个初值100. 定义一个方法guess,对A类的成员变量v,用num进行猜. 如果大了则提示大了,小了则提示小了.等于则提示猜测成功. 在ma ...

  6. 2019年春招Android方向腾讯电话面试

    第一问:TCP与UDP的区别 参考答案: 1.基于连接与无连接 2.TCP要求系统资源较多,UDP较少: 3.UDP程序结构较简单 4.流模式(TCP)与数据报模式(UDP); 5.TCP保证数据正确 ...

  7. 74.Search in a 2D Matrix

    /* * 74.Search in a 2D Matrix * 12.5 by Mingyang * 这里面的对应挺巧的: * 这个就是将2D矩阵转化成1行数组的对应表.所以对于二分查找法的初始值为: ...

  8. Ubuntu 16.04通过Snap安装应用程序

    16.04LTS可以说是一个不寻常的5年支持版本,同时也带来了Snap应用,并通过Snap可以安装众多的软件包.需要注意的是,Snap是一个全新的软件包架构,但是同样也比其它的软件包大很多. 简单的安 ...

  9. 【Java TCP/IP Socket】应用程序协议中消息的成帧与解析（含代码）

    程序间达成的某种包含了信息交换的形式和意义的共识称为协议,用来实现特定应用程序的协议叫做应用程序协议.大部分应用程序协议是根据由字段序列组成的离散信息定义的,其中每个字段中都包含了一段以位序列编码(即 ...

  10. VC++下编译Libgeotiff(含Libtiff)

    转自原文Win10+VC++下编译Libgeotiff(含Libtiff)详细图文教程 GeoTiff是包含地理信息的一种Tiff格式的文件.Libgeotiff就是一个操作GeoTiff文件的库.同 ...