<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <title>声明式触发手风琴</title>

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <style>body {

        padding: 10px;

        margin: 10px

    }</style>

</head>

<body>

<!--触发手风琴可以通过自定义的 data-toggle 属性来触发。其中data-toggle值设置为 collapse，data-target="#折叠区标识符"-->

<div class="panel-group" id="myAccordion">

    <div class="panel panel-accordion panel-default">

        <div class="panel-heading">

            <h4 class="panel-title">

                <!--定义data-parent属性，实现点击一个其中一个元素时，关闭所有的折叠区，再打开所单击的区域（如果所单击区域是展示的，则会关闭）-->

                <a href="#panel1" data-toggle="collapse" data-target="#panel1" data-parent="#myAccordion">标题一</a>

            </h4>

        </div>

        <!--在Bootstrap框架中，如果你想让内容区域不可视，只需要在 panel-collapse 样式上添加 collapse-->

        <div class="panel-collapse collapse in" id="panel1"><!--in初始选定状态-->

            <div class="panel-body">折叠区内容</div>

        </div>

    </div>

    <div class="panel panel-accordion panel-default">

        <div class="panel-heading">

            <h4 class="panel-title">

                <!--为了把标题和内容区捆绑在一起，可以通过锚链接的方法，把标题区域和面板区连在一起-->

                <a href="#panel2" data-toggle="collapse" data-target="#panel2" data-parent="#myAccordion">标题二</a>

                <!--a标签可以省去data-target，因为href中已经声明，button就必须使用data-target自定义标签了-->

            </h4>

        </div>

        <div class="panel-collapse collapse" id="panel2">

            <div class="panel-body">折叠区内容</div>

        </div>

    </div>

    <div class="panel panel-accordion panel-default">

        <div class="panel-heading">

            <h4 class="panel-title">

                <a href="#panel3" data-toggle="collapse" data-target="#panel3" data-parent="#myAccordion">标题三</a>

            </h4>

        </div>

        <div class="panel-collapse collapse" id="panel3">

            <div class="panel-body">折叠区内容</div>

        </div>

    </div>

</div>

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

<script src="js/bootstrap.min.js"></script>

</body>

</html>

Bootstrap插件-collapse的更多相关文章

  1. Bootstrap 折叠(collapse)插件面板

    折叠插件(collapse)可以很容易地让页面区域折叠起来, 无论您是用它来创建折叠导航还是内容面板,它都允许很多内容选项. 您可以使用折叠插件 1.创建可折叠的分组或折叠的面板 <!DOCTY ...

  2. Bootstrap -- 插件: 按钮状态、折叠样式、轮播样式

    Bootstrap -- 插件: 按钮状态.折叠样式.轮播样式 1. 按钮(Button)插件:可以添加进一些交互,比如控制按钮状态. 如需向按钮添加加载状态,只需要简单地向 button 元素添加 ...

  3. Bootstrap -- 插件: 模态框、滚动监听、标签页

    Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...

  4. BootStrap插件

    站点引用 Bootstrap 插件的方式有两种: 单独引用:使用 Bootstrap 的个别的 *.js 文件.一些插件和 CSS 组件依赖于其他插件.如果您单独引用插件,请先确保弄清这些插件之间的依 ...

  5. Bootstrap插件概述

    前面的话 Bootstrap除了包含丰富的Web组件之外,如下拉菜单.按钮组.导航.分页等,还包括一些JavaScript的插件.插件为 Bootstrap 的组件赋予了“生命”.Bootstrap的 ...

  6. bootstrap插件的一些常用属性介绍

    1.下拉菜单 <div class="dropdown"> <button class="btn btn-default dropdown-toggle ...

  7. Bootstrap插件的使用

    昨天,我偶然间发现了它——BootStrap插件,它是一一套功能强大的前端组件.说起来,我跟这插件还真算得上有缘,我本来并不是去找这个插件的,我本来是找BootStarp Paginator这个分页插 ...

  8. bootstrap插件学习-bootstrap.dropdown.js

    bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...

  9. bootstrap插件学习-bootstrap.modal.js

    bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...

随机推荐

  1. hdu1073

    #include<iostream> using namespace std; #define N 5050 char a[N],b[N],tmp[N]; void Read(char p ...

  2. python写入文件编码报错

    decode的作用是将其他编码的字符串转换成unicode编码,如str1.decode('gb2312'),表示将gb2312编码的字符串str1转换成unicode编码. encode的作用是将u ...

  3. C# 字符串转JSON

    一.简单小结 C# 中 String 转 JSON var items = JsonConvert.DeserializeObject<class>(stringJSON); 这里的 cl ...

  4. [Django笔记] models 深入学习

    对着官方文档撸一遍,顺便做点笔记 models 定义了本应用的数据库表结构.底层可以由不同的数据库封装实现,因为不同的数据库字段类型不一样,因此,跟以往直接用单一数据库(如mysql)建立的应用有很大 ...

  5. Docker 容器的数据卷

    数据卷的特点: 1. 数据卷在容器启动时初始化,如果容器使用的镜像在挂载点包含了数据,这些数据会拷贝到新初始化的数据卷中 2. 数据卷可以在容器之间共享和重用 3. 可以对数据卷里的内容直接进行修改 ...

  6. Docker 启动配置和远程访问

    1. 添加Docker 启动时的配置:   vi /etc/default/docker 添加:   DOCKER_OPTS=" --label name=dockerServer1 -H ...

  7. 洛谷P1373 小a和uim之大逃离

    P1373 小a和uim之大逃离 题目背景 小a和uim来到雨林中探险.突然一阵北风吹来,一片乌云从北部天边急涌过来,还伴着一道道闪电,一阵阵雷声.刹那间,狂风大作,乌云布满了天空,紧接着豆大的雨点从 ...

  8. click点击事件先后顺序的问题

    //页面加载时,每秒钟调用一次var times = setInterval("loadFlws()","1000"); function loadFlws() ...

  9. 全网排名第一的免费开源ERP Odoo Git源代码部署教程

    文/开源智造联合创始人老杨 本文来自<开源自主OdooERP部署架构指南>试读:第三章-Git源代码部署 .书籍尚未出版,请勿转载.欢迎您反馈阅读意见. 我们将从git源代码部署Odoo ...

  10. 41.QT-多线程与界面之间交互总结

    1. 线程与界面组件需要注意的地方 在QThread线程中不能直接创建QWidget之类的界面组件. 因为在QT中,所有界面组件相关的操作都必须在主线程中(也就是GUI thread) 所以, QTh ...