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="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实现通用结构折叠面板效果的更多相关文章
- jquery做个折叠面板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery垂直展开折叠手风琴二级菜单
摘要:jquery实现垂直展开二级菜单 最近新开发一个简单项目,用到左侧两级的菜单.找找了手头的文件,竟然没有现成的代码,算了,去网上找找整理下吧. 注:jquery-1.8.3.min.js需要下载 ...
- Jquery Accordion 折叠面板
属性 类型 默认值 active Boolean/Number/jQuery/Selector/Element 第一个面板 设定默认显示的面板.设置为 false 时默认不显示面板,需 collaps ...
- jquery ui 常用（一）（自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| ）
条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...
- jQuery EasyUI 折叠面板accordion的使用实例
1.对折叠面板区域 div 设置 class=”easyui-accordion” 2.在区域添加多个 div, 每个 div 就是一个面板 (每个面板一定要设置 title 属性). 3.设置面板属 ...
- 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局
EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...
- 第一百九十九节，jQuery EasyUI，Panel(面板)组件
jQuery EasyUI,Panel(面板)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解EasyUI中Panel(面板)组件的使用方法,这个组件不依赖于其 ...
- CSS实现折叠面板
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- amazeui学习笔记--js插件（UI增强3）--折叠面板Collapse
amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse 一.总结 注意点: 1.data-am-collapse:这个东西就是展开折叠事件 2.am-collapse(包括其下属 ...
随机推荐
- P1794 装备运输_NOI导刊2010提高（04）
P1794 装备运输_NOI导刊2010提高(04) 题目描述 德国放松对英国的进攻后,把矛头指向了东边——苏联.1943年初,东线的战斗进行到白热化阶段.据可靠情报,90余万德国军队在库尔斯克准备发 ...
- LeetCode：14. Longest Commen Prefix（Easy）
1. 原题链接 https://leetcode.com/problems/longest-common-prefix/description/ 2. 题目要求 给定一个字符串数组,让你求出该数组中所 ...
- Hibernate-ORM:11.Hibernate中的关联查询
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本篇博客将讲述Hibernate中的关联查询,及其级联(cascade)操作,以及指定哪一方维护关联关系的(i ...
- OrCAD把原理图中的器件添加到原理图库
1. 在使用OrCAD的时候,有时需要把别人的原理图里面的器件添加到自己的原理图库,方便以后使用,具体操作如下,依次选择Design Cache---元器件--Copy 2. 选中要存放的原理图库,鼠 ...
- 利尔达CC3200模块烧写程序笔记
1. 硬件使用利尔达的CC3200模块,仿真下载器使用利尔达的FTDI仿真器,硬件完全兼容官方的仿真器.仿真器支持IAR的调试,单步运行等操作. 2. 硬件连接接线说明: RXD, TXD, GNG, ...
- html简单的分享功能
超级简单的分享. 包括:QQ.QQ空间.新浪微博.腾讯微博,微信(只是一个二维码): 1.首先是html代码: (前端我并不太会,一直用的都是bootstrap) <div class=&quo ...
- Python 3基础教程19-模块导入语法
本文开始介绍模块导入的一些基本语法,我们现在还在Python自带的IDLE编辑器里写Python代码,如果你要需要一个功能,例如build-in的模块,那么你就需要先导入这个模块,然后才能使用这个模块 ...
- 游戏测试中遇到的奇葩bug（不断整理中...）
1:跨服组织战中,不同服务器相同组织ID的敌对玩家不能造成伤害. 2:节日活动24点开启,角色不下线自然过渡到活动开启,界面显示异常 3:前端请求数据之后,不管是否接收到后端返回的数据,只要玩家点击仙 ...
- Spring Boot 学习随记
微架构的思想在各大互联网公司越来越普及,特此记录Spring Boot的一些细节问题! 网上spring-boot的教程一堆一堆,就没有必要再详细记录了 1:建议通过Idea 来创建spring-bo ...
- liunx运维必备150个基础命令
经过上次的面试,总结了一下的linux系统常用命令: 命令 功能说明 线上查询及帮助命令(2个) man 查看命令帮助,命令的词典,更复杂的还有info,但不常用. help 查看Linux内置命令的 ...