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 相关文章推荐
JQuery插件Style定制化方法的分析与比较
May 03 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
用move.js库实现百叶窗特效
Feb 08 Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
详解ES6中class的实现原理
Oct 03 Javascript
深入理解javascript中的this
Feb 08 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中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
javaScript基础详解
2017/01/19 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
javascript中神奇的 Date对象小结
2017/10/12 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
vue轻量级框架无法获取到vue对象解决方法
2019/05/12 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
Python中用max()方法求最大值的介绍
2015/05/15 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
英语系本科生个人求职信
2013/09/21 职场文书
暑期社会实践学生的自我评价
2014/01/09 职场文书
四年级评语大全
2014/04/21 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
创建文明城市倡议书
2015/04/28 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
蜗居观后感
2015/06/11 职场文书