<!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. ps 网页配图设计

    网站配图设计 蒙太奇 品科软件---网页页面 1橡皮擦来画两图 容合 大橡皮擦擦出来自然 2图放到一个色块中 用剪贴蒙版 3调色阶 装饰下图片  矩形工具  形状  填充 画彩条 超出本框的怎么去掉多 ...

  2. linux网络编程：三次握手与四次挥手

    建立TCP需要三次握手才能建立,而断开连接则需要四次握手.整个过程如下图所示: 其中三次握手即建立连接 四次挥手则为关闭连接 TCP连接的11种状态 客户端独有的:(1)SYN_SENT (2)FIN ...

  3. java中的xpath，读取xml文档。

    1,入门 XPath即为XML路径语言(XML Path Language),它是一种用来确定XML文档中某部分位置的语言. XPath基于XML的树状结构,提供在数据结构树中找寻节点的能力.起初 X ...

  4. Android应用截图嵌入到真实设备

    Device Art Generator 你可以使用 Device Art Generator 方便快捷地将应用截图嵌入到真实设备的效果图中.这样,当用户在你的网站上或其他宣传材料中看到你的应用截图时 ...

  5. Android Studio rename module Can't rename root module

    Android Studio修改工程根目录的时候会报错, rename module Can't rename root module. 主要是该工程已经打开,再命名必须要关闭改工程,就跟正在写一个t ...

  6. 理解javascript 回调函数

    ##回调函数定义 百度百科:回调函数 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不 ...

  7. XML新手入门 创建构造良好的XML(1)

    XML新手入门 创建构造良好的XML(1) 2009-03-19 09:24 Kay Whatley IBM Developerworks 我要评论(0) 字号:T | T 本文描述了构建良好的XML ...

  8. iphone iOS7恢复到iOS6教程

    步骤一:首先根据您iOS设备型号,下载最新的iOS 6固件,您可以进入苹果官网下载,也可以以下网址下载. http://sj.zol.com.cn/ios613/

  9. fzu 1753 Another Easy Problem

    本题题意为求 t (t<150) 个 c (n,m)  (1<=m<=n<=100000)的最大公因子: 本题的难点为优化.主要有两个优化重点.一是每次对单个素因子进行处理,优 ...

  10. 安全运维之：Linux系统账户和登录安全（转）

    三.删减系统登录欢迎信息 系统的一些欢迎信息或版本信息,虽然能给系统管理者带来一定的方便,但是这些信息有时候可能被黑客利用,成为攻击服务器的帮凶,为了保证系统的安全,可以修改或删除某些系统文件,需要修 ...