<!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. Node Server管理

    停止服务 Ctrl+Z暂停 Ctrl+C: kill it 先找到process ID (second from the left), 再kill it:$ ps axu | grep node$ k ...

  2. 委托、IOC全知道

    话说写代码已有数年,曾经花了很多时间,看了很多大牛的文章也是不能参透,日思夜想都没有理解的概念,通过不断的实践与学习,回过头来再看,总算有了一个清晰的理解与认识,也看到一句话说,最好的学习就是把别人教 ...

  3. SVN服务器的搭建和使用

    VisualSVN Server和TortoiseSVN的下载,安装,汉化:SVN服务器搭建和使用(一) 如何使用VisualSVN Server建立版本库,以及TortoiseSVN的使用:SVN服 ...

  4. 【MongoDB】MongoDB 3.2 SCRAM-SHA-1验证方式

    新版本已取消addUser方法,改使用createUser方法 官方地址:https://docs.mongodb.com/manual/tutorial/create-users/ 官方地址:htt ...

  5. phthon

    没什么特别的,我们项目的跨平台代码都是在Windows环境下编码,然后跨平台编译调试,C++和Python代码都是如此.我们用C++实现底层和框架,用ctypes将纯C的API给Python化,然后用 ...

  6. Linux下随机密码生成器

    参考资料: 1:http://justwinit.cn/post/5164/ 2:http://www.linuxidc.com/Linux/2012-11/73687.htm

  7. lnmp下启动mysql报错 The server quit without updating PID file

    启动时候错误代码:Starting MySQL[FAIL.] The server quit without updating PID file (/var/run/mysqld/mysqld.pid ...

  8. 怎么在win7的64位旗舰版上配置coocs2d-x 3.2的android环境并且打包APK

    我这用的操作系统是64位win7旗舰版打包成功. 希望有急用的能看到这篇文章,毕竟大家都是从菜鸟到大神的. 也以此证明自己的成长历程. 需要的东西有: 1.JAVA-JDK 2.Python 2.7. ...

  9. Li-Fi,LED光无线局域网

    无需WiFi信号,点一盏LED灯就能上网.昨天,复旦大学计算机科学技术学院传出好消 息,一种利用屋内可见光传输网络信号的国际前沿通讯技术在实验室成功实现.研究人员将网络信号接入一盏1W的LED灯珠,灯 ...

  10. linux top命令中各cpu占用率含义

    linux top命令中各cpu占用率含义 [尊重原创文章摘自:http://www.iteye.com/topic/1137848]0.3% us 用户空间占用CPU百分比 1.0% sy 内核空间 ...