JQ实现accordion(可折叠)效果
先看效果--这个就是手风琴的效果;
原理:首先默认section1下面的dd可见,其他的全部隐藏;当点击某个obj时候,
快速隐藏全部的dd,然后只有obj.NEXT().show(),
实现:
HTML
<dl class="accordion" id="my-accordion">
<dt>Section 1</dt>
<dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>
<dt>Section 2</dt>
<dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>
<dt>Section 3</dt>
<dd>Nam mi. Proin viverra leo ut odio. Curabitur malesuada.</dd>
<dt>Section 4</dt>
<dd>Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</dd>
</dl>
css
.accordion {
width: 500px;
border: 1px solid #ccc;
border-bottom: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.accordion dt,
.accordion dd {
border-bottom: 1px solid #ccc;
margin: 0px;
}
.accordion dt {
background: #eaeaea;
cursor: pointer;
padding: 8px 4px;
font-size: 13px;
font-weight: bold;
}
.accordion dd {
padding: 12px 8px;
}
JQ 代码:
$(function (){
//在载入的时候除了第一个 通通隐藏; //或者 也可以在css中直接设置 $("dl>dd:gt(0)").addClass("dis"); $("dl>dt").click(function (){
$("dl>dd").each(function () {
this.style.display = "none";
} })
$(this).next().slideDown('normal');
})
})
JQ实现accordion(可折叠)效果的更多相关文章
- 使用jq实现打印机的效果
本例中使用的是jq和es6的语法,代码如下: html: <div id="box"> this is test <br/> 这是测试用的 </di ...
- jq实现楼层切换效果
<!DOCTYPE html> <html> <head> <style> * { margin: 0; padding: 0; box-sizing: ...
- jq封装-无缝滚动效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- jq的图片放大镜效果
<div class="imgbox"> <div class="probox"> <img src="" a ...
- jq PC做滚动效果经常用到的各类参数【可视区判断】
获取 浏览器显示区域 (可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度: $( ...
- jq数字翻页效果,随机数字显示,实现上下翻动效果
最近在做一个项目,需要实时展示一串数字,要有类似于日历翻页的效果,在网上找寻了一番,发现dataStatistics这个插件http://www.jq22.com/jquery-info8141能实现 ...
- jq实现多级手风琴效果
/*左侧*/ .wrapper, .main { height: 100%; z-index: 9 } .main { position: relative; } .main_L { width: 2 ...
- jq 全选/取消效果
//全选框$('#btnbutton').live('click',function(){ var data = $(this).attr('data'); if(data=='on'){ $(&qu ...
- jq实现地址级联效果
(function ($) { $.fn.Address = function (options) { var defaults = { divid: "Address", cal ...
随机推荐
- MySQL 用户管理——权限表
权限表 权限表存放在mysql数据库中 user表结构 用户列:Host.User.Password 权限列:*priv 资源控制列:max* 安全列:其余 db表 存储了用户对某个数据库的操作权 ...
- Struts2之自定义类型转换器
Struts2自定义类型转换器分为局部类型转换器和全局类型转换器 (1)局部类型转换器 如果页面传来一个参数reg.action?birthday=2010-11-12到后台action,然后属性用d ...
- MatLab GUI Change Size 改变界面大小
在MatLab做的GUI界面,我们有时候会希望界面的大小能改变,并且上面的控件也会跟着界面变大或者缩小,MatLab在这方面做的非常好,不像Qt的GUI那样实现起来那么麻烦,只需要把界面的属性Resi ...
- 【转】【Asp.Net MVC】asp.net mvc Model验证总结及常用正则表达式
本文属转载,来源: http://www.byywee.com/page/M0/S868/868615.html 关于Model验证官方资料: http://msdn.microsoft.com/zh ...
- Grunt - 前端开发所见即所得
首先要安装全局的grunt-cli sudo npm install grunt-cli -g 1,项目中初始化npm文件,项目名不要和[关键词]如grunt重复,一直回车即可 npm init 2, ...
- Html - 瀑布流
瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐 ...
- htc M8 无法自动恢复数据连接(4g)的问题解决
情况如下:htc m8 tdd-lte的双待手机,4g.2g同时在线. 本月出现,在短时间没有信号的情况后,无法恢复数据连接,哪怕是edge,更不论4g了. 尝试各种方法无解.最后咨询10086解决此 ...
- 虚拟机下CentOS找不到网卡eth0的解决方法
1. vi /etc/sysconfig/network-scripts/ifcfg-eth0 2. 将其中的ONBOOT属性改成yes即可 2015-8-3更新: 今天发现通过VirtualBo ...
- mongodb3.2.3 复制集安装步骤
mongodb 复制集 测试 node1: 172.18.20.161 47000 (主)node2: 172.18.20.162 47000 (副)node3: 172.18.20.163 4700 ...
- Scrum会议6(Beta版本)
组名:天天向上 组长:王森 组员:张政.张金生.林莉.胡丽娜 代码地址:HTTPS:https://git.coding.net/jx8zjs/llk.git SSH:git@git.coding.n ...