<!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. TreeMap

    TreeMap的put() ,remove() ,containsKey(), get() 全都尊重compareTo() 或者 compare() 是否返回0的结果 如果compareTo() 或者 ...

  2. 【SSM 5】Mybatis分页插件的使用

    一.添加maven依赖项 <span style="font-family:KaiTi_GB2312;font-size:18px;"><dependency&g ...

  3. [转载]python操作excel使用win32com

    原文链接:http://blog.163.com/yang_jianli/blog/static/16199000620138532243782/ 使用COM接口,直接操作EXCEL(只能在Win上) ...

  4. WKWebView _WebFilterIsActive returning: NO

    写这篇文是因为在UIWebView加载页面的时候有时候会返回: filterBlacklist = ( ); filterWhitelist = ( ); restrictWeb = 1; useCo ...

  5. go语言环境搭建+sublime text3（windows环境下）

    感觉有点坑,整了一下午~搞定 go语言环境搭建+sublime text3(windows环境下) 1.安装sublime text3 2.安装go语言程序包 3.测试go语言是否安装成功     键 ...

  6. 关于C中struct和union长度的详解

    这几天看<代码大全>中的第十三章---不常见的数据类型,里面讲解到了C语言中的struct以及对指针的解释,联想到以前看过相关的关于C语言中stuct长度的文章,只是现在有些淡忘了,因此今 ...

  7. python读取excel数据，并可视化展现

    #-*- coding: utf-8 -*- import pandas as pda import matplotlib.pyplot as pyl import matplotlib.font_m ...

  8. php:微信公众号token验证失败原因、验证码显示不出来的问题

    ob_clean(); 问题描述: 用微信官方提供的demo验证token是成功的,但是放到自己网站的框架上进行token验证老是提示"token验证失败",经过检查(用生成日志的 ...

  9. C# 异常处理 <-> 连接远程数据库遇到的问题

    PS : 移植类库需要重新生成解决方案:(要不然不能将类库添加进项目)

  10. PHP审计小记

    /* 在漏洞时代看了一篇文章,说到一个通用函数如何绕过.那么我就来看看这套程序 */ foreach($_REQUEST as $_k=>$_v) { if( strlen($_k)>0 ...