JavaScript实现IE6兼容的折叠和展开效果示例

本文通过一个例子说明了JavaScript实现了与IE6兼容的折叠和展开效果。分享给大家参考，如下：

折叠效果本身并不难折叠，但是div是否超过高度不应该用innerHTML来判断。当折叠时，所有div的innerHTML得到一个变量，然后通过截取字符串将变量的内容放入div。下面提供了一种通过div的固有高度来判断div是否过高的方法，如果过高，则提供一个按钮进行折叠和再折叠。

div的高度可以通过document . getelementbyid(' div的id ')来判断。右边，即使div的内容是通过后端输出的，document . getelementbyid(' div的id ')。offsetheight还可以得到div的最终高度，比如下面的代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；Charset=utf-8' /titlediv折叠效果/title/headsdydiv id=' fold ' style=' border :1 px # 000 solid；高度：100 px；飞越：隐藏？PHP echo ' PS/PPS/PPS/PPS/PPS/PPS/PPS/PPS/PPS/PPS/PPS/PPS/PPS/PPS/p '；/div/body/htmlscript警报(document.getElementById('fold ')。右偏)；/script运行如下：

然后，我可以根据div的高度大惊小怪。产生以下效果：

HTML的布局如下。使用带有id fold的div来剪切要折叠和展开的内容。然后，在id为的div文件夹中放一个宽度为100%的按钮，设置一个id为more_btn的按钮，因为需要从脚本加载网页的那一刻开始判断id为的div文件夹的高度。如果id为fold的div的高度太小，则不需要显示id为more_btn的按钮。同时，把这个div和按钮放在一个div中。

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN ' ' http://www . w3 . org/TR/HTML 4/strict . DTD ' HTML head meta http-equiv=' Content-Type ' Content=' text/HTML；Charset=utf-8' titlediv折叠效果/title/head body div style=' border 33601 px # 000 solid；Div id='fold' p占位/pp占位/pp占位/pp占位/pp占位/pp占位/p p占位/p/Div button ID=' more _ BTN ' style=' width :100% ' onclick=' show more(this)' See more/button/div/body/html关键是下一个网页脚本，分为两个部分，一个是网页加载部分，用来处理按钮是否显示，div是否折叠。还有按钮点击事件showmore。

脚本类型=' text/JavaScript ' var div _ height=document . getelementbyid(' fold ')。偏右；var fold _ flag=0；//用于标记当前div是展开还是折叠，初始值为0，这样如果(div _ height 100)折叠了{//根据div的高度是否小于100px，决定是否隐藏button document . getelementbyid(' more _ BTN '). style . display=' none '；} else{//将div的高度设置为100px，并隐藏document.getelementbyid ('fold ')。style.overflow=' hiddendocument . getelementbyid(' fold '). style . height=' 100px '；}//id为more_btn的按钮的点击事件。单击按钮时，将自身传递给此事件。如果形式参数为obj函数show more(obj){ if(fold _ flag==0){//expand，div的高度根据其内容自适应，所有内容document.getelementbyid ('fold ')同时显示document . getelementbyid(' fold '). style . height=' '；obj . innerHTMl=' fold '//更改按钮fold_flag=1的文本；//折叠标志为1，表示现在打开。}否则{//折叠就是恢复原状。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数学运算用法总结》和0103010

希望本文对JavaScript编程有所帮助。