效果截图：

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

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="data:images/img01.jpg" alt="">

            </dd>

        </dl>

        <dl>

            <dt>标题栏02</dt>

            <dd>

                <img src="data:images/img02.jpg" alt="">

            </dd>

        </dl>

        <dl>

            <dt>标题栏03</dt>

            <dd>

                <img src="data:images/img03.jpg" alt="">

            </dd>

        </dl>

        <dl>

            <dt>标题栏04</dt>

            <dd>

                <img src="data:images/img04.jpg" alt="">

            </dd>

        </dl>

    </div>

</body>

</html>

jquery实现通用结构折叠面板效果的更多相关文章

  1. jquery做个折叠面板

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jquery垂直展开折叠手风琴二级菜单

    摘要:jquery实现垂直展开二级菜单 最近新开发一个简单项目,用到左侧两级的菜单.找找了手头的文件,竟然没有现成的代码,算了,去网上找找整理下吧. 注:jquery-1.8.3.min.js需要下载 ...

  3. Jquery Accordion 折叠面板

    属性 类型 默认值 active Boolean/Number/jQuery/Selector/Element 第一个面板 设定默认显示的面板.设置为 false 时默认不显示面板,需 collaps ...

  4. jquery ui 常用（一）（自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| ）

    条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...

  5. jQuery EasyUI 折叠面板accordion的使用实例

    1.对折叠面板区域 div 设置 class=”easyui-accordion” 2.在区域添加多个 div, 每个 div 就是一个面板 (每个面板一定要设置 title 属性). 3.设置面板属 ...

  6. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  7. 第一百九十九节，jQuery EasyUI，Panel(面板)组件

    jQuery EasyUI,Panel(面板)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解EasyUI中Panel(面板)组件的使用方法,这个组件不依赖于其 ...

  8. CSS实现折叠面板

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. amazeui学习笔记--js插件（UI增强3）--折叠面板Collapse

    amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse 一.总结 注意点: 1.data-am-collapse:这个东西就是展开折叠事件 2.am-collapse(包括其下属 ...

随机推荐

  1. python2.7入门---file（文件）&OS 文件&目录方法

        首先file 对象使用 open 函数来创建,下表列出了 file 对象常用的函数: 序号 方法及描述 1 file.close() 关闭文件.关闭后文件不能再进行读写操作. 2 file.f ...

  2. java doc 编写

    总而言之,我觉得有用的是: @see 只要敲了@see 然后会自动写你的类名的,很方便.# 去连接字段 {@link } 只要敲了{@link } 然后会自动写你的类名的,很方便.# 去连接字段 如果 ...

  3. Hibernate-ORM:10.Hibernate中的分页

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本篇博客讲述Hibernate中的分页 hibernate中的分页其实很好写,它通过操作对象的方式,来进行分页 ...

  4. 清除远程桌面连接记录和SQLSERVER 连接记录的办法

    1.清除远程桌面连接记录: 清除远程桌面访问痕迹.使用windows系统自带的“远程桌面协助”mstsc进行远程,如果连接的用户多了,会留下访问的痕迹.虽然能带来方便,但是如果对于公用电脑来说,这些访 ...

  5. thrift安装

    yum -y install gcc-c++ autoconf automake sysconftool boost boost-devel libtool perl-ExtUtils-MakeMak ...

  6. 接口测试工具postman（三）添加断言

    每个用例执行完成后,可以通过添加断言来判断返回结果是否正确,即表示用例执行是否成功. 官方说明文档:https://learning.getpostman.com/docs/postman/scrip ...

  7. OpenStack配置虚拟机vcpu绑定步骤 转至元数据结尾

    . Changed in compute node: 给宿主机预留资源: 宿主机可用cpu:cpuid – cpuid 宿主机可用内存:25G #vim /etc/nova/nova.conf vcp ...

  8. 使用idea工具开发webservice

    在idea开发工具中使用axis2插件创建集成webservice的web项目: 一.创建java项目                  二.添加webservices支持 在红线框2处选择要使用的w ...

  9. linux备忘录-账号管理与ACL权限设定

    知识 账号管理中的一些文件结构 /etc/passwd 每一行的内容都为下面结构 账号名称:密码:UID:GID:用户信息说明:家目录:shell ---- UID ---- -- 0 -> 代 ...

  10. BZOJ 4011 HNOI2015 落忆枫音 DAG上的dp（实际上重点在于分析）

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4011 题意概述:给出一张N点的DAG(从1可以到达所有的点),点1的入度为0.现在加一条原 ...