<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>折叠下拉效果</title>
<style>
*{
margin: 0;
padding: 0;
}
.main{
width: 500px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 8px;
}
h3{
font-size: 16px;
font-weight: normal;
height: 30px;
line-height: 1.5;
background-color: #F6F6F6;
border: 1px solid #c5c5c5;
padding: 2px;
margin-top: -1px;
}
h3 i{
display: inline-block;
width: 12px;
height: 20px;
vertical-align: -28%;
background: url(./images/bg.png) no-repeat;
background-position: 0 0;
}
.on{
background-position: -32px 0;
}
.main div{
border: 1px solid #c5c5c5;
margin-top: -1px;
height: 100px;
display: none;
padding: 2px;
}
.main div:nth-child(2){
display: block;
}
.active{
background: #007FFF;
color: #fff;
}
</style>
</head>
<body>
<div class="main">
<h3 class="active"><i class="on"></i>标题1</h3>
<div>段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1</div>
<h3><i></i>标题2</h3>
<div>段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2</div>
<h3><i></i>标题3</h3>
<div>段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3</div>
<h3><i></i>标题4</h3>
<div>段落4段落4段落4段落4段落4段落4段落4段落4段落4段落4段落4段落4段落4段落4</div>
</div>

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$("h3").click(function(){
var status=$(this).next("div").css("display");
console.log($(this).css("display"));
if (status=="none") {
$(this).addClass("active").next("div").slideDown().siblings('div').slideUp();
$(this).siblings('h3').removeClass('active').find("i").removeClass('on');
$(this).find('i').addClass('on');
}

})
})
</script>
</body>
</html>

jQuery实现折叠下拉效果的更多相关文章

  1. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  2. jQuery超酷下拉插件6种效果演示

    原始的下拉框很丑啦, 给大家一款jQuery超酷下拉插件6种效果 效果预览 下载地址 实例代码 <div class="container"> <section ...

  3. jquery实现多级下拉菜单

    支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...

  4. 一款jQuery立体感动态下拉导航菜单特效

    一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...

  5. 一款jquery编写图文下拉二级导航菜单特效

    一款jquery编写图文下拉二级导航菜单特效,效果非常简洁大气,很不错的一款jquery导航菜单特效. 这款jquery特效适用于很多的个人和门户网站. 适用浏览器:IE8.360.FireFox.C ...

  6. jquery操作select下拉框的各种方法，获取选中项的值或文本，根据指定的值或文本选中select的option项等

    简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...

  7. jQuery之双下拉框

    双下拉框要实现的效果,实际上就是左边下拉选择框里的内容,可以添加到右边,而右边同理.写了个简单的例子,来说明一下. 代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...

  8. jquery.chosen.js下拉选择框美化插件项目实例

    由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...

  9. 基于jQuery美化联动下拉选择框

    今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

随机推荐

  1. Excel with COM

    COM     excelApplication ; COM     workBooks ; COM     workSheets ; COM     workSheet ; COM     work ...

  2. 在<s:iterator>标签里给动态表格添加序号

    在<s:iterator>标签里给动态表格添加序号,需要用到<s:iterator>标签里的Status属性里的count eg:<s:iterator value=&q ...

  3. Jmeter模拟不同带宽

    Jmeter自带模拟带宽设置,当然前提肯定是你当前的带宽>=你要模拟的带宽,好比你装了个4m的宽带,要模拟100m的带宽,那是做梦 做起来也不难,打开user.properties文件,增加如下 ...

  4. Jmeter分布式测试

    随着并发量的增大,一台机器就不能满足需求了,所以我们采用分布式(Master-Slaver)的方案去执行高并发的测试 注意事项: Master机器一般我们不执测试,所以可以拿一台配置差些的机器,主要用 ...

  5. Xcode7打包，iOS9真机闪退，如何解决？

    问:有些项目用xcode7打开运行,打包安装到iOS9设备上程序会闪退. 如果用xcode7以下编译,然后打包到iOS9的设备上就是正常的.这是为什么,关键是,怎么解决? 答:iOS9发布之后,有些a ...

  6. clientWidth、offsetWidth和scrollWidth的区分

    scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. off ...

  7. Tcp/IP

     在数据传输完毕之后,通信双方都可以发出释放连接的请求.释放连接的过程为如上图所示:      1)数据传输结束后,主机A的应用进程先向其TCP发出释放连接请求,不在发送数据.TCP通知对方要释放从A ...

  8. shallow copy 和 deep copy 的示例

    本文属原创,转载请注明出处:http://www.cnblogs.com/robinjava77/p/5481874.html   (Robin) Student package base; impo ...

  9. html5设计原理(转)

    转自:   http://www.cn-cuckoo.com/2010/10/21/the-design-of-html5-2151.html 今天我想跟大家谈一谈HTML5的设计.主要分两个方面:一 ...

  10. 在VMware下正确克隆CentOS6.5的打开方式

    引言 想必用VMware Workstation软件安装虚拟机,作为一个爱"折腾"的攻城狮肯定是千千万万遍的事情.无论是学习还是工作之中,我们都会遇到需要在一台物理主机上运行多台虚 ...