效果截图：
说明：可以任意添加多个类似结构样式，点击标题栏图片对应隐藏、显示。
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>