<!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. C# 6.0可能的新特性及C#发展历程

    据扯,C# 6.0在不远的将来就发布了,对应的IDE可能是VS 2014(.Net Framework 5.0),因为VS 2013已于2013年10月份发布了,对应的是.Net Franework ...

  2. jquery 农历日历 可自适应

    在网上找了许多大牛做的农历日历,但是不是不符合项目中的要求,就是本身就有问题有Bug ,把大牛门的做日历看了n遍 自己又改造了一遍得到了这个:随后日历又要做个自适应的长宽,又在js中改造代码..... ...

  3. 【Python】pip国内安装源

    豆瓣安装源 pip install packages -i http://pypi.doubanio.com/simple --upgrade --trusted-host pypi.doubanio ...

  4. MongoDB学习笔记(数据操作)

    1.  批量插入:     以数组的方式一次插入多个文档可以在单次TCP请求中完成,避免了多次请求中的额外开销.就数据传输量而言,批量插入的数据中仅包含一份消息头,而多次单条插入则会在每次插入数据时封 ...

  5. CocoaPods安装及使用《转》

    http://www.cnblogs.com/eagley/p/5407721.html

  6. Kafka报错-as it has seen zxid 0x83808 our last zxid is 0x0 client must try another server

    as it has seen zxid 0x83808 our last zxid is 0x0 client must try another server 停止zookeeper,删除datadi ...

  7. Druid监控Mybatis不显示SQL问题

    一.Web.xml增加如下配置: 1.DruidWebStatFilter.如果没有配置filter信息.session监控,web监控等不可用.没有配置 <filter> <fil ...

  8. python---IO多路复用

    这里的IO是指网络IO python中通过select模块实现IO多路复用,select模块中有select.poll.epoll等方法 下面例子以select模块实现IO多路复用 仅仅只有IO多路复 ...

  9. hibernate 注解 主键生成策略

    一.JPA通用策略生成器       通过annotation来映射hibernate实体的,基于annotation的hibernate主键标识为@Id, 其生成规则由@GeneratedValue ...

  10. Bitmap简单操作笔记

    using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Imaging; ...