jquery实现通用结构折叠面板效果

效果截图：

　说明：可以任意添加多个类似结构样式，点击标题栏图片对应隐藏、显示。

jquery代码：

思路一：基本方法

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>    
        $(function(){
            var $dt = $('.main dl dt');                            //获取标题栏dt
            var $dd = $('.main dl dd');                            //获取图片父容器dd
            var flag = [];                                         //定义标记，用于存储图片父容器的显示、隐藏状态
            $.each($dt,function(i){
                flag[i] = true;                                    //设置折叠初始状态
                $dt.eq(i).on('click',function(){
                    if(flag[i]){                                   
                        $(this).next('dd').slideUp();              //隐藏元素
                        flag[i] = false;                        
                    } else {                                       
                        $(this).next('dd').slideDown();            //显示元素
                        flag[i] = true;
                    }
                })
            })
        })
    </script>

思路二：利用闭包

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(function(){        
            var $dt = $('.main dl dt');                  　　//获取标题栏dt
            var $dd = $('.main dl dd');                     //获取图片父容器dd
            var flag = [];                                  //定义标记，用于存储折叠的显示、隐藏状态
            $dt.each(function(i){                        　 //遍历，并向函数传递遍历序号
                flag[i] = true;                             //设置折叠的初始状态为true
                $($dt.eq(i)).click(                        
                    (function(i,dd){                    　　//返回一个闭包函数，存储传递进来的动态参数值:i和$dd.eq(i)
                        return function(){
                            if(flag[i]){
                                $(dd).fadeOut();        　　//隐藏元素
                                flag[i] = false;
                            }else{
                                $(dd).fadeIn();            //显示元素
                                flag[i] = true;            
                            }
                        }
                    })(i,$dd.eq(i))                        //向当前执行函数中传递参数
                )
            })
        })
    </script>

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery-折叠效果</title>
    <style>
        .main{
            width: 980px; margin: 0 auto; overflow: hidden;
        }
        .main dl{
            float: left; margin-right: 20px; width: 200px;
        }
        .main dl dt{
            background-color: #dcdcdc; cursor: pointer; height: 30px; line-height: 30px; text-align: center;
        }
        .main dl dd{
            margin: 0;
        }
        .main dl img{
            width: 200px; height: 200px;
        }
    </style>
</head>
<body>
    <div class="main">
        <dl>
            <dt>标题栏01</dt>
            <dd>
                <img src="images/img01.jpg" alt="">
            </dd>
        </dl>
        <dl>
            <dt>标题栏02</dt>
            <dd>
                <img src="images/img02.jpg" alt="">
            </dd>
        </dl>
        <dl>
            <dt>标题栏03</dt>
            <dd>
                <img src="images/img03.jpg" alt="">
            </dd>
        </dl>
        <dl>
            <dt>标题栏04</dt>
            <dd>
                <img src="images/img04.jpg" alt="">
            </dd>
        </dl>
    </div>    
</body>
</html>