<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>accordion</title>

    <script src="js/jquery-1.7.1.js"></script>

    <script src="js/sqLib.js"></script>

    <style>

        .accordion-panel{

            width: 400px;

        }

        .accordion-panel-heading{

            color: #d74147;

            width: 400px;

            height: 40px;

            line-height: 40px;

            border: 1px solid #d74147;

            margin: 5px 0;

            padding-left: 10px;

            border-radius: 5px;

        }

        .accordion-panel-content{

            display: none;

            border: 1px solid #000;

            width: 400px;

            border-radius: 5px;

            padding-left: 10px;

            line-height: 40px;

        }

    </style>

    <script>

        $(function(){

            $('.accordion-panel-heading').on('click',function(){

                if($(this).hasClass('active')) {

                    $(this).removeClass('active');

                    $(this).siblings('.accordion-panel-content').slideUp('slow');

                }

                else {

                    $('.accordion .accordion-panel-heading').removeClass('active');

                    $('.accordion .accordion-panel-content').slideUp('slow');

                    $(this).addClass('active');

                    $(this).siblings('.accordion-panel-content').slideDown('slow');

                }

            });

        });

    </script>

</head>

<body>

<div class="accordion">

    <div class="accordion-panel">

        <div class="accordion-panel-heading">标题1</div>

        <div class="accordion-panel-content">内容1</div>

    </div>

    <div class="accordion-panel">

        <div class="accordion-panel-heading">标题2</div>

        <div class="accordion-panel-content">内容2</div>

    </div>

    <div class="accordion-panel">

        <div class="accordion-panel-heading">标题3</div>

        <div class="accordion-panel-content">内容3</div>

    </div>

    <div class="accordion-panel">

        <div class="accordion-panel-heading">标题4</div>

        <div class="accordion-panel-content">内容4</div>

    </div>

</div>

</body>

</html>

　　

accordion的更多相关文章

  1. toolkit:Accordion DataTemplate ListBox TextBlock Interaction.Triggers

    困扰好几个小时的问题终于解决了,本人系菜鸟,使用MVVM设计模式,绑定DataTemplate的Command,需要使用 DataContent的资源,否则无法触发ICommand ClickChil ...

  2. Accordion - 手风琴

    //手风琴效果 <div style="overflow:hidden;height:400px;width:948px;"> <div class=" ...

  3. jqueryui / accordion的用法记录

    jqueryui 的 widget 中包含了基本上我们都需要的ui组件, 除了那个unslider. 参考地址是: www.jqueryui.com. 要能够看懂/并使用/ 完全掌握的话, 就要使用其 ...

  4. wpf中手风琴控件Accordion编辑模板后控件不正常。

    昨天有个网友Accordion控件从sl迁移到wpf时候显示不正常.也是就没有效果. 我也是sl做的比较多,wpf玩的少,Accordion模板里触发器,状态组调了一早上都没达到满意效果, 无奈只有百 ...

  5. boostrap折叠，jquery ui accordion同时打开多个标签

    http://caibaojian.com/bootstrap/javascript.html http://www.w3cschool.cc/jqueryui/example-accordion.h ...

  6. AngularJs的UI组件ui-Bootstrap分享（三）——Accordion

    Accordion手风琴控件使用uib-accordion和uib-accordion-group指令. <script> angular.module('myApp', ['ui.boo ...

  7. [转]ionic Accordion list three levels

    简化后的主要代码: $scope.groups = []; for (var i = 0; i < 2; i++) { $scope.groups[i] = { name: i, items: ...

  8. flex的Accordion组件头部文本居中显示

    flex的Accordion组件头部文本默认是居左的,可以通过设置headerStyleName属性使之居中,另外还可以设置字体的样式等 <?xml version="1.0" ...

  9. JQ实现accordion(可折叠)效果

    先看效果--这个就是手风琴的效果:          原理:首先默认section1下面的dd可见,其他的全部隐藏:当点击某个obj时候,  快速隐藏全部的dd,然后只有obj.NEXT().show ...

  10. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.5.Accordion控件

    accordion是另一个UI控件,能允许你将一组content加入相互分隔的.能够被浏览者的交互打开或关闭的panels中.因此,它大多数的content在初始化的时候是隐藏的,很像tabs控件.每 ...

随机推荐

  1. hdu2952Counting Sheep

    Problem Description A while ago I had trouble sleeping. I used to lie awake, staring at the ceiling, ...

  2. 解决英文版Windows程序乱码

    前段时间由于工作需要装了一个英文版Windows,以至于在一些脚本和控制台程序里面处理汉字的时候总是显示乱码(比如:“???”). 在尝试了很多编码和解码的操作后,乱码问题还是没能很好的解决.后来才发 ...

  3. tp可用的超强第三方图表类库-JpGraph

    日常开发中经常需要做图表,比如线状图.饼状图.柱状图等等,用PHP作图时需要使用复杂抽象的画图函数,或者借助一些网上下载的花柱形图.饼形图的类来实现,没有一个统一的chart类来实现图表的快速开发,非 ...

  4. Print! Print! Print!

    print语句可以实现打印--只是对程序员友好的标准输出流的接口而已. 从技术角度来讲,这是把一个或多个对象转换为其文本表达形式,然后发送给标准输出或另一个类似文件的流. 更详细地说,在Python中 ...

  5. stream~filestream

    http://blog.csdn.net/feliciafay/article/details/6157356 http://blog.csdn.net/feliciafay/article/deta ...

  6. PCB電路板為何要有測試點？

    對學電子的人來說,在電路板上設置測試點(test point)是在自然不過的事了,可是對學機械的人來說,測試點是什麼?可能多還有點一頭霧水了.我記得我第一次進電子組裝廠工作當製程工程師的時候,還曾經為 ...

  7. perl binlog dml操作报告

    <pre name="code" class="html">if ( $#ARGV < 2 ){ print "please inp ...

  8. poj 3287 The Trip, 2007_贪心

    题意:把一个包放入另一个包内,使得总共要带的件数最少,就是说大包可以装小包,且一个大包只能装一个小包,但是这个小包可以继续装更小的包. 思路:因为相同大小的包不能互相装,所以最小数量就是有相同尺寸的包 ...

  9. C++中基类的析构函数为什么要用virtual虚析构函数

    知识背景 要弄明白这个问题,首先要了解下C++中的动态绑定. 关于动态绑定的讲解,请参阅:  C++中的动态类型与动态绑定.虚函数.多态实现 正题 直接的讲,C++中基类采用virtual虚析构函数是 ...

  10. 类加载器与methodinterceptor接口

    类加载器: JVM将类加载过程分为三个步骤: 装载(Load):加载二进制文件 链接(Link)进行了验证:验证文件准确性 准备:将静态变量进行分配内存,初始化其默认值. 解析:符号引用转换为直接引用 ...