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

最新推荐文章于 2022-10-20 15:41:36 发布

pmandy

最新推荐文章于 2022-10-20 15:41:36 发布

阅读量1.4k

点赞数

分类专栏： javascript+jquery 文章标签： xhtml javascript c# ViewUI

本文链接：https://blog.csdn.net/pmandy/article/details/84158066

版权

javascript+jquery 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!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" οnclick="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" οnclick="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" οnclick="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>

pmandy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面多个DIV折叠效果的实现(通用性高)

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt; &lt;
复制链接

扫一扫

专栏目录