点击更多显示更多内容

今天在做项目的时候遇到页面中加载的文章过多,如果全部都显示出来的话会影响页面的美观,所以写了一个点击加载更多的按钮,让文章的内容只显示其中的一部分,如果读者想看更多的内容可以点击更多这个按钮观看更多的内容!

因为我写的页面中有相对定位和绝对定位,所以在demo页面中也是用的相对定位和绝对定位写的:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="box" style="background:#ccc;width:500px;margin:5px;line-height:20px;overflow:hidden;position:relative"><div class="nei" style="position:absolute;width:100%">每读李白、杜甫、王维的诗，眼前就会浮现出一幅幅山村水廓、竹篱茅舍的秀美画卷，每看石涛、朱耷，大千的画，心中又会默念起一首首吟梅咏菊、托物抒怀的隽永诗篇；所谓诗中有画，画中有诗，彼此是可以互动与转换的，都是文化瑰宝、智慧的结晶，我不想在这里谈诗论画，那文学艺术的东西，要留给行家们去探讨，唯有他们才梳理得清，这里要说的不是纸上山水，也不是庭中花卉，而是走进大自然时的真切感受和亲身经历。那里的巉崖峭壁，终年云遮雾障，那里的飞瀑流泉，四季枯涨有时；它们形成于开天辟地之时，昂首在风蚀雨淋之中。每当我攀越而上或穿行于林中，冷不防会掠过一溜烟四脚后影，会惊起一串铃清脆乐音；那都是自然的骄子、山国的臣民。大山就有这样的神奇，一旦到达顶峰，即使我不会写诗，也总想把白云当稿纸任意涂写，让激情释放；即使我不会唱歌，也敢对着蓝天大喊一声，让山鸣谷应。在山野之中，无论是有生命还是无生命，无论是活动还是静止的，其实都是一种符号，在为我们揭示出大自然的秘密，可惜大多数人都还不认识那种符号，没把天地万物当作大书来读，始终看山还是山，看水还是水，无法上升到一种新的高度。过去我也是这样，看到大海，不过是那么多水，看到美女，不过是一张嘴巴两条腿；要是谁跟我侈谈什么高雅艺术，我就会避难就易，避重就轻，有时干脆就闭嘴，要不然，就会言不及义，出尽洋相。后来我经过深刻反省：认识到一个人虽然天赋重要，但起决定性作用的还应是后天，只要肯下功夫，通过不懈努力，岂能一成不变？于是便下定决心，从头开始，只要敢冲破那道自筑的围墙，打掉自卑感，只要站得高，就会看得远！于是我便夙兴夜寐，孜孜以求，频频走进大自然，去阅读高山大嶂，辨识流岚轻烟，并且由表及里、由浅入深，渐渐就品出了滋味，尝到了甜头，然后一步步登堂上殿，不再坐井观天。说起来这种阅读方法，也简单得很，既不用焚香沐浴，也无须斋戒净身；可在崇山峻岭，也可在涧旁野径；只要放下得失，心无挂碍，一草一木，就能变成文字，一沙一石，也会化作语言。读罢高岭又读深谷，通篇都是生机勃勃、诗意盎然，真不愧是大自然的杰作，最精彩部份，便是天地大美。</div></div><a href="javascript:void(0)" class="showa">展开</a><script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">$(document).ready(function(){var oHeight = $('.nei').height();//获取里面div的高度
        oldHeight=oHeight;//把里面div的高度赋值给外面的divvar newHeight = $("#box").css({height:"100px"});//这个是加载后给外面div设置的一个高度(显示内容的区域)if(oHeight<100){//如果里面div的高度小于100的话也就是说内容不多的时候把更多按钮隐藏
            $('.showa').css('display','none')}$(".showa").click(function(){if(parseInt($("#box").height())==oldHeight){$("#box").animate({height:"100px"});$(this).html("展开");}else{$("#box").animate({height:oldHeight});$(this).html("收起");}});});
</script>
</body>
</html>

有什么错误的地方希望看到的朋友给提示一下,可以共同进步!

转载于:https://www.cnblogs.com/zhaorongzhang/p/6005554.html

点击更多显示更多内容相关推荐

直播电商平台开发，点击查看更多显示所有内容
直播电商平台开发,点击查看更多显示所有内容实现代码: mainactivity.xml: <?xml version="1.0" encoding="utf-8& ...
php按钮如何加显示不出来,javascript - 点击按钮显示更多，自定义变量显示不出来？...
点击按钮显示更多,自定义变量显示不出来? 提示错误信息:. 想要达到的效果: 点击按键一次更多,多显示3条信息显示更多支持小明1这是我的个性签名 288个赞同本回答分成[旅游版]和[日常版] ...
vue 点击展开显示更多点击收起部分隐藏
vue 点击展开显示更多点击收起部分隐藏要求: 只展示几条数据,其余的收起.点击显示更多时候,查看全部如下:以百度云的页面为例直接上代码: 1.html部分: <div><d ...
点击标题显示相应内容
点击标题显示相应内容的功能就是将页面分成上下两部分,其中上面部分全都是标题,可能会有多个标题.下面部分就是标题的内容部分,根据标题部分的选中情况展示对应标题的内容.因为本功能是静态页面,所以实现原理依 ...
点击展开显示折叠内容
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
原生JS实现点击按钮显示更多内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
Openlayers中使用Overlay实现点击要素显示html内容弹窗并且动态更改弹窗内容
场景 Openlayers中使用Overlay实现点击要素弹窗并且弹窗随之移动: Openlayers中使用Overlay实现点击要素弹窗并且弹窗随之移动_BADAO_LIUMANG_QIZHI的博客 ...
前端js——tab选项卡切换模板、例子（点击标签显示对应内容）
效果 1.页面布局分别设置五个标签,给五个标签写序号,移到标签上获取标签序号显示对应的div 1)设置一个整个的div包含所有的标签和所有内容 2)标签 <ul><li style ...
android悬浮按钮弹出与隐藏,Android悬浮窗按钮实现点击并显示/隐藏多功能列表
前言最近在一个项目中,需要制作录屏的功能,原先是在应用中有录屏/控制的按钮,思考之下觉得这种效果并不好,因此就想制作一个可以悬浮的悬浮窗,这样不论手机在什么界面中都可以对录屏功能进行控制. 这里就来 ...
php ajax 上拉显示更多,PHP+Ajax点击加载更多内容－这个效果好，速度快，只能点击更多加载，不能滚动自动加载...
这个效果好,速度快,只能点击更多加载,不能滚动自动加载一.HTML部分 ::点击加载更多内容:: 引入jQuery插件和jquery.more.js加载更多插件 jQuery $(function( ...

点击更多显示更多内容

点击更多显示更多内容相关推荐

最新文章

热门文章