先看效果--这个就是手风琴的效果;

       

 原理:首先默认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(可折叠)效果的更多相关文章

  1. 使用jq实现打印机的效果

    本例中使用的是jq和es6的语法,代码如下: html: <div id="box"> this is test <br/>  这是测试用的 </di ...

  2. jq实现楼层切换效果

    <!DOCTYPE html> <html> <head> <style> * { margin: 0; padding: 0; box-sizing: ...

  3. jq封装-无缝滚动效果

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

  4. jq的图片放大镜效果

    <div class="imgbox"> <div class="probox"> <img src="" a ...

  5. jq PC做滚动效果经常用到的各类参数【可视区判断】

    获取 浏览器显示区域 (可视区域)的高度 :  $(window).height();  获取浏览器显示区域(可视区域)的宽度 :  $(window).width();  获取页面的文档高度: $( ...

  6. jq数字翻页效果,随机数字显示,实现上下翻动效果

    最近在做一个项目,需要实时展示一串数字,要有类似于日历翻页的效果,在网上找寻了一番,发现dataStatistics这个插件http://www.jq22.com/jquery-info8141能实现 ...

  7. jq实现多级手风琴效果

    /*左侧*/ .wrapper, .main { height: 100%; z-index: 9 } .main { position: relative; } .main_L { width: 2 ...

  8. jq 全选/取消效果

    //全选框$('#btnbutton').live('click',function(){ var data = $(this).attr('data'); if(data=='on'){ $(&qu ...

  9. jq实现地址级联效果

    (function ($) { $.fn.Address = function (options) { var defaults = { divid: "Address", cal ...

随机推荐

  1. MySQL 用户管理——权限表

    权限表 权限表存放在mysql数据库中 user表结构 用户列:Host.User.Password 权限列:*priv 资源控制列:max* 安全列:其余   db表 存储了用户对某个数据库的操作权 ...

  2. Struts2之自定义类型转换器

    Struts2自定义类型转换器分为局部类型转换器和全局类型转换器 (1)局部类型转换器 如果页面传来一个参数reg.action?birthday=2010-11-12到后台action,然后属性用d ...

  3. MatLab GUI Change Size 改变界面大小

    在MatLab做的GUI界面,我们有时候会希望界面的大小能改变,并且上面的控件也会跟着界面变大或者缩小,MatLab在这方面做的非常好,不像Qt的GUI那样实现起来那么麻烦,只需要把界面的属性Resi ...

  4. 【转】【Asp.Net MVC】asp.net mvc Model验证总结及常用正则表达式

    本文属转载,来源: http://www.byywee.com/page/M0/S868/868615.html 关于Model验证官方资料: http://msdn.microsoft.com/zh ...

  5. Grunt - 前端开发所见即所得

    首先要安装全局的grunt-cli sudo npm install grunt-cli -g 1,项目中初始化npm文件,项目名不要和[关键词]如grunt重复,一直回车即可 npm init 2, ...

  6. Html - 瀑布流

    瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐 ...

  7. htc M8 无法自动恢复数据连接(4g)的问题解决

    情况如下:htc m8 tdd-lte的双待手机,4g.2g同时在线. 本月出现,在短时间没有信号的情况后,无法恢复数据连接,哪怕是edge,更不论4g了. 尝试各种方法无解.最后咨询10086解决此 ...

  8. 虚拟机下CentOS找不到网卡eth0的解决方法

    1. vi /etc/sysconfig/network-scripts/ifcfg-eth0 2. 将其中的ONBOOT属性改成yes即可   2015-8-3更新: 今天发现通过VirtualBo ...

  9. mongodb3.2.3 复制集安装步骤

    mongodb 复制集 测试 node1: 172.18.20.161 47000 (主)node2: 172.18.20.162 47000 (副)node3: 172.18.20.163 4700 ...

  10. Scrum会议6(Beta版本)

    组名:天天向上 组长:王森 组员:张政.张金生.林莉.胡丽娜 代码地址:HTTPS:https://git.coding.net/jx8zjs/llk.git SSH:git@git.coding.n ...