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

冷寒冰

浏览: 251659 次
性别:
来自: 北京

最近访客更多访客>>

CheungGQ

firespiritzi

高开天

梁静茹的小三

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript+jquery

<!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>

分享到：

Compare it | 十天学会DIV+CSS(WEB标准)

2012-02-24 09:59
浏览 6652
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论