JavaScript实现兼容IE6的收起折叠与展开效果实例


Posted in Javascript onSeptember 20, 2017

本文实例讲述了JavaScript实现兼容IE6的收起折叠与展开效果。分享给大家供大家参考,具体如下:

收起折叠效果本身不难,但是div是否超出高度不应该利用innerHTML去判断,收起折叠的时候把所有div的innerHTML搞到一个变量又把一个变量的内容通过截取字符串的方式,又将其放到div。下面提供一种通过div本身固有的高度来判断div是否过高,如果过高则提供折叠收起的按钮。

div的高度通过document.getElementById("div的id").offsetHeight去判断,即使这个div的内容是通过后端输出的,document.getElementById("div的id").offsetHeight同样可以取到div的最终高度,比如如下代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div折叠效果</title>
</head>
<body>
<div id="fold" style="border:1px #000 solid;height:100px;overflow:hidden">
  <?php
    echo "<p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>";
  ?>
</div>
</body>
</html>
<script>
  alert(document.getElementById("fold").offsetHeight);
</script>

运行结果如下:

JavaScript实现兼容IE6的收起折叠与展开效果实例

那么,我就是可以根据div的高度来做文章了。做出如下的效果:

JavaScript实现兼容IE6的收起折叠与展开效果实例

HTML布局如下,用一个id为fold的div将你要收起、展开的内容,夹起来。之后,在这个id为fold的div中放一个宽度为100%的按钮,设置一个id为more_btn的按钮,因为要在脚本处在加载网页就开始判断,id为fold的div的高度,如果id为fold的div的高度过小,这个id为more_btn的按钮就没有显示的必要了。同时,将这个放内容的div与button放在一个div里面。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>div折叠效果</title>
  </head>
  <body>
    <div style="border:1px #000 solid;">
      <div id="fold">
        <p>占位置</p><p>占位置</p><p>占位置</p><p>占位置</p><p>占位置</p><p>占位置</p>
        <p>占位置</p><p>占位置</p><p>占位置</p><p>占位置</p><p>占位置</p><p>占位置</p>
      </div>
      <button id="more_btn" style="width:100%" onclick="showmore(this)">查看更多</button>
    </div>
  </body>
</html>

关键是接下来的网页脚本,具体分两部分,一部分是网页加载部分,用于处理按钮显示否,div折叠否。还有一部分是按钮点击事件showmore。

<script type="text/javascript">
  var div_height=document.getElementById("fold").offsetHeight;
  var fold_flag=0;//用于标志现在的div是展开还是折叠,初始为0,以为折叠中
  if(div_height<100){//根据div的高度是否少于100px,判断是否要隐藏按钮
    document.getElementById("more_btn").style.display="none";
  }
  else{//将div的高度强制定为100px,同时超出部分隐藏
    document.getElementById("fold").style.overflow="hidden";
    document.getElementById("fold").style.height="100px";
  }
  //id为more_btn的按钮的点击事件,按钮被点击的时候,将自己传到这个事件中,形式参数为obj
  function showmore(obj){
    if (fold_flag == 0) {//展开的话,就是让div的高度根据其内容自适应,同时显示所有内容
      document.getElementById("fold").style.overflow = "";
      document.getElementById("fold").style.height = "";
      obj.innerHTML="收起"//按钮的文字改变
      fold_flag=1;//折叠标志为1,意味现在为打开状态
    }
    else{//收起就是回到原来的状态。
      document.getElementById("fold").style.overflow="hidden";
      document.getElementById("fold").style.height="100px";
      obj.innerHTML="查看更多"
      fold_flag=0;
    }
  }
</script>

不想用按钮,你也可以设置一个居中的超级链接。

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

Javascript 相关文章推荐
LazyLoad 延迟加载(按需加载)
May 31 Javascript
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
JS简单实现无缝滚动效果实例
Aug 24 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 Javascript
BootStrap 弹出层代码
Feb 09 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
Jan 07 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
vue实现浏览器全屏展示功能
Nov 27 Javascript
用vue构建多页面应用的示例代码
Sep 20 #Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 #Javascript
微信小程序 input表单与redio及下拉列表的使用实例
Sep 20 #Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 #Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 #Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 #jQuery
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 #Javascript
You might like
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
php中$_REQUEST、$_POST、$_GET的区别和联系小结
2011/11/23 PHP
PHP面向对象程序设计之接口用法
2014/08/20 PHP
php中spl_autoload详解
2014/10/17 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
jquery控制display属性为none或block
2014/03/31 Javascript
js获取视频时长代码
2014/04/10 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
详解JS异步加载的三种方式
2017/03/07 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
基于Python log 的正确打开方式
2018/04/28 Python
django框架cookie和session用法实例详解
2019/12/10 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
python实现连连看游戏
2020/02/14 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
用python制作个视频下载器
2021/02/01 Python
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
营销人才自我鉴定范文
2013/12/25 职场文书
优良学风班总结材料
2014/02/08 职场文书
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
二手房购房意向书范本
2014/04/01 职场文书
党建工作先进材料
2014/05/02 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
销售合作意向书范本
2015/05/08 职场文书
MySQL中的隐藏列的具体查看
2021/09/04 MySQL
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸