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 EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
Javascript中replace()小结
Sep 30 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
Bootstrap table使用方法记录
Aug 23 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 Javascript
基于Node.js实现压缩和解压缩的方法
Feb 13 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 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/02 无线电
如何将数据从文本导入到mysql
2006/10/09 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
小程序实现人脸识别功能(百度ai)
2018/12/23 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
全面解读Python Web开发框架Django
2014/06/30 Python
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
python日志记录模块实例及改进
2017/02/12 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
简单易懂的python环境安装教程
2017/07/13 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
下载官网python并安装的步骤详解
2019/10/12 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
介绍一下MD5加密算法
2016/11/12 面试题
涉外离婚协议书怎么写
2014/11/20 职场文书
被告代理词范文
2015/05/25 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
基于tensorflow权重文件的解读
2021/05/26 Python