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. 洛谷 [P3205] 合唱队

    区间DP 手动模拟一下,我们发现本题就是一个左右加数的区间DP #include <iostream> #include <cstdio> #include <cstri ...

  2. linux 抓取访问量排行

    需求: 分析图片服务日志,把日志(每个图片访问次数*图片大小的总和)排行,取top10,也就是计算每个url的总访问大小 语句: awk '{a[$1]+=$10;}END{for(i in a){p ...

  3. eslint 在webstorm配置

    1.安装nodejs和eslint 2.在 webstorm 的 file - setting搜索eslint,配置eslint路径 3.在项目目录下新建.eslintrc文件 4.配置eslint ...

  4. 洛谷——P3576 [POI2014]MRO-Ant colony

    P3576 [POI2014]MRO-Ant colony 题目描述 The ants are scavenging an abandoned ant hill in search of food. ...

  5. Java运算基础

    计算机对负数的运算 =  先取绝对值的原码----> 然后取反,----->+1   这是负数的补码表示 例如  -5       5的原码= 0000,0101  取反   1111,1 ...

  6. jfinal使用idea启动 访问报404 action not found

    公司一个项目,在eclipse里面启动正常,换到idea里面启动后,启动没有报错,但是访问的时候会提示404 action not found. 百度了很多种解决方法 都没有解决. 今天脑子一转,想到 ...

  7. HDC与CDC相互转换

    转自loop_k原文 HDC与CDC相互转换 概念 首先说一下什么是DC(设备描述表):Windows应用程序通过为指定设备(屏幕,打印机等)创建一个设备描述表(Device Context, DC) ...

  8. [Testing] Config jest to test Javascript Application -- Part 1

    Transpile Modules with Babel in Jest Tests Jest automatically loads and applies our babel configurat ...

  9. node 爬虫 --- 将爬取到的数据，保存到 mysql 数据库中

    步骤一:安装必要模块 (1)cheerio模块 ,一个类似jQuery的选择器模块,分析HTML利器. (2)request模块,让http请求变的更加简单 (3)mysql模块,node连接mysq ...

  10. C#语言基础语句

    case,switch,break的使用 Console.WriteLine("1.汉堡"); Console.WriteLine("2.薯条"); Conso ...