<!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. linux出现user account has expired解决方案

    SUSE Linux 用户user1登陆不了,确认密码没错,使用root用户登陆,su - user1 提示密码不对,passwd user1提示帐户过期user account hasexpired ...

  2. 解压版mysql安装

    步骤如下: 1.下载安装包 2.在环境变量中配置安装包的bin路径 3.修改安装包下的my-default.ini. 修改basedir和datadir的值为解压文件对应的路径,port和 serve ...

  3. TCP、UDP、IP 协议分析

    http://rabbit.xttc.edu.cn/rabbit/htm/artical/201091145609.shtml  http://bhsc881114.github.io/2015/06 ...

  4. c++程序设计之编程思想

    代码块愈小,代码的功能就愈容易管理,代码的处理和移动就愈轻松. 任何一个傻瓜都能写出计算机可以理解的代码,唯有写出人类容易理解的代码,才是优秀的程序员. 绝大多数情况下,函数应该放在它所使用的数据的所 ...

  5. Python面试题

    1.Python装饰器 详情 2.设置多个Python项目使用不同版本的Python和第三方库 使用PyEnv 详情 3.PEP8 详情 4.参数传递 按引用传递 5.列表解析,字典解析 详情 6.列 ...

  6. 转载-V.I.Arnold, beyond a mathematician

    转自-http://blog.renren.com/blog/248100754/471276636 在AMS的首页上找到了三条讣告,依次是V.I.Arnold(1937-2010),W.Rudin( ...

  7. JVM GC原理

    JVM原理 1.分代回收(目前JDK都采用此方式) 采用分治的思想,进行代的划分,把不同生命周期的对象放在不同代上,不同代上采用最适合它的垃圾回收方式进行回收.非堆区有CMS Perm Gen(持久化 ...

  8. Maven打包跳过测试

    运行mvn install时跳过Test 方法一: <project> [...] <build> <plugins> <plugin> <gro ...

  9. redis 与 spring整合 hash 增删改操作 list增删改操作

    本人,对于以前redis的学习是非常痛苦的!近期将以前的东西捡起来.以博客的形式存储,以便于以后快速捡起来,并和广大同胞一起分享! 1):简单介绍 redis 是基于C语言开发. redis是一个ke ...

  10. Redis中的简单事物以及消息订阅发布

    Redis支持简单的事物,但是没有mysql的Innodb支持的那么的完善 我们接下来看一下Redis和Mysql的事物的一个对比:   MySQL Redis 开启 start transactio ...