页面多个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>
??? <title></title>
??? <style>?
#foldbar {margin-left:1000px;cursor:pointer;display:inline}?
</style>
<script>
??? var foldimg = "\+"
??? var puckimg = "-"
??? function fold(o) {
??????? var show = o.innerHTML == foldimg ? true : false;
??????? o.innerHTML = show ? puckimg : foldimg;
??????? obj = document.getElementById(o.parentNode.id + "_content")
??????? obj.style.overflow = "hidden"
??????? obj.style.display = "block"
??????? if (!obj.h) {
??????????? obj.h = obj.offsetHeight
??????????? obj.style.height = obj.h
??????? }
??????? playfold(obj, show)
??? }
??? playfold = function (o, show) {
??????? var h = 10; //px?
??????? var time = 10; //ms?
??????? var timer = window.setTimeout(function ()
??????? { playfold(o, show) }, 10);
??????? if (parseInt(o.style.height) < o.h && show) {
??????????? o.style.height = parseInt(o.style.height) + h + "px";
??????? }
??????? else if (parseInt(o.style.height) > 0 && !show) {
??????????? var fh = parseInt(o.style.height) - h
??????????? fh = fh > 0 ? fh : 0;
??????????? o.style.height = fh + "px";
??????????? if (!fh) {
??????????????? o.style.display = "none";
??????????? }
??????? }
??????? else {
??????????? window.clearTimeout(timer);
??????? }
??? }?
</script>
</head>
<body>
<div?? style=" width:1200px; height:auto">
??? <div id="title_1">
??????? 栏目1 <span id="foldbar" onclick="fold(this)" >
??????????? +</span>
??? </div>
???
??????? <div id="title_1_content" style="display: none">
??????????? 用JS实现层的折叠效果
??????????? <br>
??????????? 用JS实现层的折叠效果
??????????? <br>
??????????? 用JS实现层的折叠效果
??????????? <br>
??????????? 用JS实现层的折叠效果
??????????? <br>
??????????? 用JS实现层的折叠效果
???????
??? </div>
??? <div id="title_2">
??????? 栏目2 <span id="foldbar" onclick="fold(this)">+</span>
??? </div>
??? <div id="title_2_content" style="display: none">
??????? 用JS实现层的折叠效果
??????? <br>
??????? 用JS实现层的折叠效果
??????? <br>
??????? 用JS实现层的折叠效果
??????? <br>
??????? 用JS实现层的折叠效果
??????? <br>
??????? 用JS实现层的折叠效果
??? </div>
??? <div id="title_3">
??????? 栏目3 <span id="foldbar" onclick="fold(this)">+</span>
??? </div>
??? <div id="title_3_content" style="display: none">
??????? 用JS实现层的折叠效果
??????? <br>
??????? 用JS实现层的折叠效果
??????? <br>
??????? 用JS实现层的折叠效果
??????? <br>
??????? 用JS实现层的折叠效果
??????? <br>
??????? 用JS实现层的折叠效果
??? </div>
</div>
</body>
</html>