这篇文章主要介绍了JavaScript实现兼容IE6的收起折叠与展开效果,结合具体实例形式分析了javascript事件响应及针对页面元素属性的动态操作相关实现,需要的朋友可以参考下

本文实例讲述了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">
  <?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>

运行结果如下:

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

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>
      <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" 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页面元素操作总结》、《JavaScript正则表达式大全》、《JavaScript查找算法总结》、《JavaScript数据结构与算法总结》、《JavaScript遍历算法与总结》、《JavaScript错误与调试总结》及《JavaScript数算用法总结》

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

最新资讯
滴滴启动国庆出行安全部署 程维:安全发展观是必修课

滴滴启动国庆出行安全

滴滴出行CEO、安委会主任程维在会上表示,今年是滴滴安
爱回收E+轮融资超1亿美元 二手行业难做全品类

爱回收E+轮融资超1亿

陈雪峰谈到并未做全品类的原因时认为,二手行业不存在全
中通宣布将香港上市发行价定为每股218港元 下周二挂牌

中通宣布将香港上市发

中通快递(NYSE:ZTO)今晚宣布,将香港二次上市的发行价定为
微信支付正计划加码存款市场 相关功能正处测试阶段

微信支付正计划加码存

9月22日消息,微信支付正计划加码存款市场。记者近期注
比亚迪据称商谈向戴姆勒供应电动汽车芯片

比亚迪据称商谈向戴姆

知情人士透露,沃伦·巴菲特支持的比亚迪正在与戴姆勒洽
强如BAT、TMD也难免栽跟头

强如BAT、TMD也难免栽

被视为中国互联网顶流的BAT、TMD,家家有本难念的经,发展
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,