您的位置：首页 > Web前端 > JQuery

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

2016-04-13 17:24 549 查看

效果截图：

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

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航