html折叠div,页面多个DIV折叠成效的实现(通用性高)

页面多个DIV折叠效果的实现(通用性高)

#foldbar {margin-left:1000px;cursor:pointer;display:inline}

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);

}

}

栏目1

+

用JS实现层的折叠效果

用JS实现层的折叠效果

用JS实现层的折叠效果

用JS实现层的折叠效果

用JS实现层的折叠效果

栏目2 +

用JS实现层的折叠效果

用JS实现层的折叠效果

用JS实现层的折叠效果

用JS实现层的折叠效果

用JS实现层的折叠效果

栏目3 +

用JS实现层的折叠效果

用JS实现层的折叠效果

用JS实现层的折叠效果

用JS实现层的折叠效果

用JS实现层的折叠效果