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. 花匠（codevs 3289）

    题目描述 Description 花匠栋栋种了一排花,每株花都有自己的高度.花儿越长越大,也越来越挤.栋栋决定把这排中的一部分花移走,将剩下的留在原地,使得剩下的花能有空间长大,同时,栋栋希望剩下的花 ...

  2. git status检测不到文件变化

    SourceTree(Git)无法检测新增文件的解决方法 有时候使用git管理软件SourceTree会遇到往项目里新增了文件,软件却没有任何反应的问题,这多发生在git合并出错而只能重新git的情况 ...

  3. 第一行代码 Android 思维导图

    第一行代码 Android  思维导图

  4. Idea配置Tomcat以及maven

    配置Tamcat Run-->Edit Configurations +-->如果列表里没有tomcat-->点击33 items more irrelevant继续寻找--> ...

  5. ros使用罗技f710无线控制手柄

    参考:blog.csdn.net/hcx25909/article/details/9042469 罗技F710无线控制手柄ROS下使用说明 安装手柄相关的包和驱动 sudo apt-get inst ...

  6. mybatis注解@selectKey对于db2数据库的使用

    在新增时返回当前新增的主键. 数据库:DB2 用的是mybatis的@selectKey 代码: @InsertProvider(type = Test.class,method="inse ...

  7. ganglia-monitoring-centos-linux

    http://www.tecmint.com/install-configure-ganglia-monitoring-centos-linux/ http://monitor.gitlab.net/ ...

  8. VC++_错误 无法打开包括文件“glglut.h” No such file or directory 怎么办

    在网上看到类似的问题,查找资料找到了解决方案,现整理如下,有些更改,好让自己多些印象,附原文网址:http://blog.csdn.net/bigloomy/article/details/62265 ...

  9. IP协议解读（二）

    IP协议是TCP协议栈中的核心协议,也是网络编程的基础之中的一个. 我们接着在IP协议解读(一)继续学习 网络层作用 IP分片: IP数据报的长度超过帧的MTU时,将会被分片传输. 分片可能发生在发送 ...

  10. 自己定义html中a标签的title提示tooltip

    自己定义html中a标签的title提示tooltip 简单介绍 用简单的jquery+CSS创建自己定义的a标签title提示,用来取代浏览器默认行为.如图: watermark/2/text/aH ...