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 相关文章推荐
js的with语句使用方法
Sep 21 Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
jquery中each方法示例和常用选择器
Jul 08 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
完美的js图片轮换效果
Feb 05 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 Javascript
全面解析Vue中的$nextTick
Dec 24 Vue.js
用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
第十四节 命名空间 [14]
2006/10/09 PHP
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
php session 预定义数组
2009/03/16 PHP
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
设定php简写功能的方法
2019/11/28 PHP
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
Python datetime时间格式化去掉前导0
2014/07/31 Python
跟老齐学Python之用while来循环
2014/10/02 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
python实现粒子群算法
2020/10/15 Python
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
PyQt QMainWindow的使用示例
2021/03/24 Python
法定代表人身份证明书
2014/09/10 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
员工旷工检讨书
2015/08/15 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL