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保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
javascript实现的闭包简单实例
Jul 17 Javascript
js右下角弹出提示框示例代码
Jan 12 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 Javascript
Vue监听数据对象变化源码
Mar 09 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 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
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
php+ajax实时刷新简单实例
2015/02/25 PHP
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
2017/06/21 PHP
js获得鼠标的坐标值的方法
2013/03/13 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
python常用函数详解
2016/09/13 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
Python阶乘求和的代码详解
2020/02/14 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
python 绘制正态曲线的示例
2020/09/24 Python
2019年Java 最常见的 面试题
2016/10/19 面试题
工厂总经理岗位职责
2014/02/07 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
员工离职证明范本
2015/06/12 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
Redis 彻底禁用RDB持久化操作
2021/07/09 Redis
浅谈克隆 JavaScript
2021/11/02 Javascript