前台特效（6) 折叠栏目（动画效果）

js方法：

ps:因js方法通过class获取DOM对象需要额外函数，故使用Id获取DOM对象，所以只有第一个栏目有效，但不影响理解其原理

<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>折叠栏目</title>
        <style type="text/css">
            body {
                background-color: #FFF;
            }
            body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
                margin: 0;
                padding: 0;
            }
            .main {
                width: 960px;
                margin-right: auto;
                margin-left: auto;
                border-right-width: 1px;
                border-left-width: 1px;
                border-right-style: solid;
                border-left-style: solid;
                border-right-color: #c2d5e3;
                border-left-color: #c2d5e3;
                border-bottom-width: 1px;
                border-bottom-style: solid;
                border-bottom-color: #c2d5e3;
                margin-top: 30px;
                font-size: 12px;
                color: #000;
            }
            #divOne {
                width: 960px;
                height: 260px;
                overflow: hidden;
            }
            .main .one1 {
                background-color: #eef3f6;
                height: 30px;
                width: 960px;
                border-top-width: 1px;
                border-bottom-width: 1px;
                border-top-style: solid;
                border-bottom-style: solid;
                border-top-color: #c2d5e3;
                border-bottom-color: #c2d5e3;
                line-height: 30px;
            }
            .main .one1 a {
                font-size: 13px;
                font-weight: bold;
                color: #336699;
                text-decoration: none;
                margin-left: 10px;
                display: block;
                float: left;
            }
            .main .one1 a:hover {
                text-decoration: underline;
            }
            #oneButton {
                background: url(3.png);
                /*    background-repeat: no-repeat;*/
                /*background-position:0px -20px;*/
                display: block;
                float: right;
                height: 20px;
                width: 20px;
                margin-top: 5px;
                margin-right: 10px;
                border-top-style: none;
                border-right-style: none;
                border-bottom-style: none;
                border-left-style: none;
            }
            .styleOne {
                float: left;
                height: 75px;
                width: 280px;
                background-image: url(4.png);
                background-repeat: no-repeat;
                background-position: 0px -60px;
                padding-left: 40px;
                line-height: 18px;
            }
            .styleOne a {
                font-weight: bold;
                color: #000;
                text-decoration: none;
            }
            .styleOne a:hover {
                text-decoration: underline;
            }
            .styleTwo {
                float: left;
                height: 75px;
                width: 280px;
                background-image: url(4.png);
                background-repeat: no-repeat;
                background-position: 0px 0px;
                padding-left: 40px;
                line-height: 18px;
            }
            .styleTwo a {
                font-weight: bold;
                color: #000;
                text-decoration: none;
            }
            .styleTwo a:hover {
                text-decoration: underline;
            }
            .main #divOne .one2 {
                height: 75px;
                width: 960px;
            }
            .main #divOne .one3 {
                height: 75px;
                width: 960px;
                border-top-width: 1px;
                border-top-style: dashed;
                border-top-color: #cdcdcd;
            }
            .main #divOne .one4 {
                height: 75px;
                width: 960px;
                border-top-width: 1px;
                border-top-style: dashed;
                border-top-color: #cdcdcd;
            }
            .main #divTwo {
                height: 330px;
                width: 960px;
            }
            .main #divTwo .two1 {
                height: 30px;
                width: 960px;
                border-top-width: 1px;
                border-bottom-width: 1px;
                border-top-style: solid;
                border-bottom-style: solid;
                border-top-color: #c2d5e3;
                border-bottom-color: #c2d5e3;
                background-color: #eef3f6;
            }
            .main #divTwo .two2 {
                height: 75px;
                width: 960px;
            }
            .main #divTwo .two3 {
                height: 75px;
                width: 960px;
                border-top-width: 1px;
                border-top-style: dashed;
                border-top-color: #cdcdcd;
            }
            .main #divTwo .two4 {
                height: 75px;
                width: 960px;
                border-top-width: 1px;
                border-top-style: dashed;
                border-top-color: #cdcdcd;
            }
            .main #divTwo .two5 {
                height: 75px;
                width: 960px;
                border-top-width: 1px;
                border-top-style: dashed;
                border-top-color: #cdcdcd;
            }
        </style>

        <!--脚本-->
        <script type="text/javascript">

            window.onload = function(){
                //获取样式
                function getStyle(obj,attr){
                    if (document.all)
                    {
                        return obj.currentStyle[attr];
                    }
                    else
                    {
                        return getComputedStyle(obj,null)[attr];
                    }
                }

                //获取对象
                var oneButton = document.getElementById("oneButton");
                var divOne = document.getElementById("divOne");
                //点击收起再次点击展开

                oneButton.onclick = function(){

                    var heights = parseInt(getStyle(divOne,"height"));

                    if (heights==30)
                    {
                        var a1a =setInterval(function(){
    
                            heights+=10;
                            divOne.style.height = heights+"px";
                            if (heights==260)
                            {
                                clearInterval(a1a);
                                oneButton.style.background="url(3.png)";
                            }
                        },30)
                    }
                    else
                    { 
                        var b1b =setInterval(function(){
                            heights-=10;
                            divOne.style.height = heights+"px";
                            if (heights==30)
                            { clearInterval(b1b);
                                oneButton.style.background="url(2.png)";
                            }
                        },30)

                    }
                }
            }

        </script>

    </head>

    <body>
        <div class="main">
            <div id="divOne">
                <div class="one1"><a href="#">Discuz! 交流与讨论</a><input name="" type="button"  id="oneButton"/></div>
                <div class="one2">
                    <div class="styleOne"><a href="#">Discuz!-发展建议</a> (33) <br/>
                        主题: 9, 帖数: 1073<br/>
                        最后发表: 3 小时前 </div>
                    <div class="styleTwo"><a href="#">Discuz!-安装使用</a> (13) <br/>
                        主题: 145, 帖数: 41935<br/>
                        最后发表: 半小时前 </div>
                    <div class="styleOne"> <a href="#">Discuz!-模板风格</a><br/>
                        主题: 11, 帖数: 8733<br/>
                        最后发表: 5 天前 </div>
                </div>
                <div class="one3">
                    <div class="styleOne"><a href="#">Discuz!-BUG反馈</a> <br/>
                        主题: 10, 帖数: 10950<br/>
                        最后发表: 昨天 19:01 </div>
                    <div class="styleTwo"><a href="#"> Discuz!-插件Hack</a> (3) <br/>
                        主题: 25, 帖数: 21141<br/>
                        最后发表: 15 分钟前  </div>
                    <div class="styleOne"> <a href="#">掌上论坛</a>(3) <br/>
                        主题: 52, 帖数: 38065<br/>
                        最后发表: 5 小时前 </div>
                </div>
                <div class="one4">
                    <div class="styleOne"><a href="#">Discuz!-数据转换</a> <br/>
                        主题: 10, 帖数: 10950<br/>
                        最后发表: 昨天 19:01 </div>
                    <div class="styleOne"><a href="#">Discuz!-商业服务支持</a> (7)<br/> 
                        主题: 6, 帖数: 411<br/>
                        最后发表: 15 小时前 </div>
                    <div class="styleOne"> <a href="#">应用中心</a> (6) <br/>
                        主题: 7, 帖数: 1251<br/>
                        最后发表: 7 小时前 </div>
                </div>
            </div>
            <div id="divTwo">
                <div class="one1"><a href="#">Discuz! 交流与讨论</a><input name="" type="button"  id="oneButton"/></div>
                <div class="one2">
                    <div class="styleOne"><a href="#">Discuz!-发展建议</a> (33) <br/>
                        主题: 9, 帖数: 1073<br/>
                        最后发表: 3 小时前 </div>
                    <div class="styleTwo"><a href="#">Discuz!-安装使用</a> (13) <br/>
                        主题: 145, 帖数: 41935<br/>
                        最后发表: 半小时前 </div>
                    <div class="styleOne"> <a href="#">Discuz!-模板风格</a><br/>
                        主题: 11, 帖数: 8733<br/>
                        最后发表: 5 天前 </div>
                </div>
                <div class="one3">
                    <div class="styleOne"><a href="#">Discuz!-BUG反馈</a> <br/>
                        主题: 10, 帖数: 10950<br/>
                        最后发表: 昨天 19:01 </div>
                    <div class="styleTwo"><a href="#"> Discuz!-插件Hack</a> (3) <br/>
                        主题: 25, 帖数: 21141<br/>
                        最后发表: 15 分钟前  </div>
                    <div class="styleOne"> <a href="#">掌上论坛</a>(3) <br/>
                        主题: 52, 帖数: 38065<br/>
                        最后发表: 5 小时前 </div>
                </div>
                <div class="one4">
                    <div class="styleOne"><a href="#">Discuz!-数据转换</a> <br/>
                        主题: 10, 帖数: 10950<br/>
                        最后发表: 昨天 19:01 </div>
                    <div class="styleOne"><a href="#">Discuz!-商业服务支持</a> (7)<br/> 
                        主题: 6, 帖数: 411<br/>
                        最后发表: 15 小时前 </div>
                    <div class="styleOne"> <a href="#">应用中心</a> (6) <br/>
                        主题: 7, 帖数: 1251<br/>
                        最后发表: 7 小时前 </div>
                </div>
            </div>
        </div>
    </body>
</html>

图片：

基本原理：

1.给按钮添加点击事件

2.之后判断栏目的高度，如果高度是最低的30，就使高度增加，反正亦然

3.达到最低或者最高值时，改变按钮的背景

希望对你有所帮助！^_^~

效果图：

 

jquery方法：

ps:成熟方法，可以实现每个栏目的折叠

<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>折叠栏目</title>
        <style type="text/css">
            body {
                background-color: #FFF;
            }
            body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
                margin: 0;
                padding: 0;
            }
            .main {
                width: 960px;
                margin-right: auto;
                margin-left: auto;
                border-right-width: 1px;
                border-left-width: 1px;
                border-right-style: solid;
                border-left-style: solid;
                border-right-color: #c2d5e3;
                border-left-color: #c2d5e3;
                border-bottom-width: 1px;
                border-bottom-style: solid;
                border-bottom-color: #c2d5e3;
                margin-top: 30px;
                font-size: 12px;
                color: #000;
            }
            .divOne {
                width: 960px;
                height: 260px;
                overflow: hidden;
            }
            .main .one1 {
                background-color: #eef3f6;
                height: 30px;
                width: 960px;
                border-top-width: 1px;
                border-bottom-width: 1px;
                border-top-style: solid;
                border-bottom-style: solid;
                border-top-color: #c2d5e3;
                border-bottom-color: #c2d5e3;
                line-height: 30px;
            }
            .main .one1 a {
                font-size: 13px;
                font-weight: bold;
                color: #336699;
                text-decoration: none;
                margin-left: 10px;
                display: block;
                float: left;
            }
            .main .one1 a:hover {
                text-decoration: underline;
            }
            .oneButton {
                background: url(3.png);
                /*    background-repeat: no-repeat;*/
                /*background-position:0px -20px;*/
                display: block;
                float: right;
                height: 20px;
                width: 20px;
                margin-top: 5px;
                margin-right: 10px;
                border: none;
            }
            .styleOne {
                float: left;
                height: 75px;
                width: 280px;
                background-image: url(4.png);
                background-repeat: no-repeat;
                background-position: 0px -60px;
                padding-left: 40px;
                line-height: 18px;
            }
            .styleOne a {
                font-weight: bold;
                color: #000;
                text-decoration: none;
            }
            .styleOne a:hover {
                text-decoration: underline;
            }
            .styleTwo {
                float: left;
                height: 75px;
                width: 280px;
                background-image: url(4.png);
                background-repeat: no-repeat;
                background-position: 0px 0px;
                padding-left: 40px;
                line-height: 18px;
            }
            .styleTwo a {
                font-weight: bold;
                color: #000;
                text-decoration: none;
            }
            .styleTwo a:hover {
                text-decoration: underline;
            }
            .main .divOne .one2 {
                height: 75px;
                width: 960px;
            }
            .main .divOne .one3 {
                height: 75px;
                width: 960px;
                border-top-width: 1px;
                border-top-style: dashed;
                border-top-color: #cdcdcd;
            }
            .main .divOne .one4 {
                height: 75px;
                width: 960px;
                border-top-width: 1px;
                border-top-style: dashed;
                border-top-color: #cdcdcd;
            }
        </style>

        <!--脚本-->
        <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
        <script type="text/javascript">
            $(function(){
                $(".oneButton").each(function(i){
                    $(this).click(function(){
                        var heights = $($(".divOne")[i]).height();
                        if(heights<=30){
                            var move1 = setInterval(function(){
                                heights+=10;
                                $($(".divOne")[i]).height(heights);
                                if(heights>=260){
                                    clearInterval(move1);
                                    $($(".oneButton")[i]).css("background","url(./3.png)");
                                }
                            },30)
                        }else{
                            var move2 = setInterval(function(){
                                heights-=10;
                                $($(".divOne")[i]).height(heights);
                                if(heights<=30){
                                    clearInterval(move2);
                                    $($(".oneButton")[i]).css("background","url(./2.png)");
                                }
                            },30)
                        }
                    })
                })
            })
        </script>

    </head>

    <body>
        <div class="main">
            <div class="divOne">
                <div class="one1"><a href="#">Discuz! 交流与讨论</a><input name="" type="button"  class="oneButton"/></div>
                <div class="one2">
                    <div class="styleOne"><a href="#">Discuz!-发展建议</a> (33) <br/>
                        主题: 9, 帖数: 1073<br/>
                        最后发表: 3 小时前 </div>
                    <div class="styleTwo"><a href="#">Discuz!-安装使用</a> (13) <br/>
                        主题: 145, 帖数: 41935<br/>
                        最后发表: 半小时前 </div>
                    <div class="styleOne"> <a href="#">Discuz!-模板风格</a><br/>
                        主题: 11, 帖数: 8733<br/>
                        最后发表: 5 天前 </div>
                </div>
                <div class="one3">
                    <div class="styleOne"><a href="#">Discuz!-BUG反馈</a> <br/>
                        主题: 10, 帖数: 10950<br/>
                        最后发表: 昨天 19:01 </div>
                    <div class="styleTwo"><a href="#"> Discuz!-插件Hack</a> (3) <br/>
                        主题: 25, 帖数: 21141<br/>
                        最后发表: 15 分钟前  </div>
                    <div class="styleOne"> <a href="#">掌上论坛</a>(3) <br/>
                        主题: 52, 帖数: 38065<br/>
                        最后发表: 5 小时前 </div>
                </div>
                <div class="one4">
                    <div class="styleOne"><a href="#">Discuz!-数据转换</a> <br/>
                        主题: 10, 帖数: 10950<br/>
                        最后发表: 昨天 19:01 </div>
                    <div class="styleOne"><a href="#">Discuz!-商业服务支持</a> (7)<br/> 
                        主题: 6, 帖数: 411<br/>
                        最后发表: 15 小时前 </div>
                    <div class="styleOne"> <a href="#">应用中心</a> (6) <br/>
                        主题: 7, 帖数: 1251<br/>
                        最后发表: 7 小时前 </div>
                </div>
            </div>
            <div class="divOne">
                <div class="one1"><a href="#">Discuz! 交流与讨论</a><input name="" type="button"  class="oneButton"/></div>
                <div class="one2">
                    <div class="styleOne"><a href="#">Discuz!-发展建议</a> (33) <br/>
                        主题: 9, 帖数: 1073<br/>
                        最后发表: 3 小时前 </div>
                    <div class="styleTwo"><a href="#">Discuz!-安装使用</a> (13) <br/>
                        主题: 145, 帖数: 41935<br/>
                        最后发表: 半小时前 </div>
                    <div class="styleOne"> <a href="#">Discuz!-模板风格</a><br/>
                        主题: 11, 帖数: 8733<br/>
                        最后发表: 5 天前 </div>
                </div>
                <div class="one3">
                    <div class="styleOne"><a href="#">Discuz!-BUG反馈</a> <br/>
                        主题: 10, 帖数: 10950<br/>
                        最后发表: 昨天 19:01 </div>
                    <div class="styleTwo"><a href="#"> Discuz!-插件Hack</a> (3) <br/>
                        主题: 25, 帖数: 21141<br/>
                        最后发表: 15 分钟前  </div>
                    <div class="styleOne"> <a href="#">掌上论坛</a>(3) <br/>
                        主题: 52, 帖数: 38065<br/>
                        最后发表: 5 小时前 </div>
                </div>
                <div class="one4">
                    <div class="styleOne"><a href="#">Discuz!-数据转换</a> <br/>
                        主题: 10, 帖数: 10950<br/>
                        最后发表: 昨天 19:01 </div>
                    <div class="styleOne"><a href="#">Discuz!-商业服务支持</a> (7)<br/> 
                        主题: 6, 帖数: 411<br/>
                        最后发表: 15 小时前 </div>
                    <div class="styleOne"> <a href="#">应用中心</a> (6) <br/>
                        主题: 7, 帖数: 1251<br/>
                        最后发表: 7 小时前 </div>
                </div>
            </div>
        </div>
    </body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/longdidi/p/2959115.html