编程 Javascript

Bootstrap创建可折叠的组件

Posted in Javascript onFebruary 23, 2016

本文将学习如何通过Bootstrap创建可折叠的组件，具体内容如下
什么是必需的
您必须引用 jquery.js 和 bootstrap-collapse.js - 这两个 JavaScript 文件都位于 docs/assets/js 文件夹内。
您可以在不编写大量 JavaScript 或者不调用 JavaScript 的情况下创建可折叠的组件。
实例
第一个实例演示如何不调用 JavaScript 创建可折叠的组件。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>collapsible example</title>
 <link href="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />

</head>
<body>
 <div class="container-fluid">
 <div class="accordion" id="accordion2">
  <div class="accordion-group">
  <div class="accordion-heading">
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
   Click me to exapand. Click me again to collapse. Part I.
  </a>
  </div>
  <div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">
  <div class="accordion-inner">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  </div>
  </div>
  <div class="accordion-group">
  <div class="accordion-heading">
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
   Click me to exapand. Click me again to collapse. Part II.
  </a>
  </div>
  <div id="collapseTwo" class="accordion-body collapse">
  <div class="accordion-inner">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  </div>
  </div>
  <div class="accordion-group">
  <div class="accordion-heading">
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
   Click me to exapand. Click me again to collapse. Part III.
  </a>
  </div>
  <div id="collapseThree" class="accordion-body collapse">
  <div class="accordion-inner">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  </div>
  </div>
  </div>
 </div>
 <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
 <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
</body>
</html>

解释
这里有三点需要注意。第一，添加 data-toggle="collapse" 到您要点击的链接上，用来展开或折叠组件。
第二，添加一个 href 或一个 data-target 属性到父组件，它的值为子组件的 id。
第三，添加一个 data-parent 属性用来创建手风琴式的效果。data-parent 属性的值与主容器 div （保存整个手风琴组件）的 id 属性的值相同。如果您想要创建一个简单的折叠组件，不需要像手风琴那么复杂，就不需要添加这个属性。
实例
第二个实例演示如何创建简单的可折叠组件。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>collapsible via JavaScript example</title>
 <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="myCollapsibleExample"><a href="#demo" data-toggle="collapse">Click me to expand and click me again to collapse.</a></div>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehe.
</div>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
</body>
</html>

通过 JavaScript 调用
您可以使用下面的代码来通过 JavaScript 触发折叠。

$(".collapse").collapse()

选项、方法和事件
这里有一些通过 Bootstrap Collapsible JavaScript 插件使用的选项、方法、事件。具体如下所示：
选项
parent:值的类型为 Selector。默认值为 false。当父元素显示时，父元素下所有的可折叠元素是关闭的。
toggle:值的类型为 Boolean。默认值为 true。当被调用时，切换所有的可折叠元素。
toggle:值的类型为 Boolean。默认值为 true。当被调用时，切换所有的可折叠元素。
方法
.collapse(options):触发可折叠内容。接受一个可选的 option 对象。
.collapse('toggle'):展示或隐藏一个可折叠的页面元素。
.collapse('show'):展示一个可折叠的页面元素。
.collapse(hide):隐藏一个可折叠的页面元素。
事件
show:当 show 实例方法被调用之后，此事件被立即触发。
shown:当可折叠页面元素显示出来之后（同时 CSS 过渡效果也已执行完毕），此事件被触发。
hide:当 hide 实例方法被调用之后，此事件被立即触发。
hidden:当可折叠页面元素向用户隐藏之后（同时 CSS 过渡效果也已执行完毕），此事件被触发。

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容，希望对大家的学习有所帮助。

Bootstrap创建可折叠的组件

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

更正确的asp冒泡排序

May 24 Javascript

基于jQuery的倒计时实现代码

May 30 Javascript

JS操作Cookies包括(读取添加与删除)

Dec 26 Javascript

2014年50个程序员最适用的免费JQuery插件

Dec 15 Javascript

JavaScript基础知识及常用方法总结

Jan 10 Javascript

Bootstrap项目实战之子栏目资讯内容

Apr 25 Javascript

tab栏切换原理

Mar 22 Javascript

使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析

Jan 16 Javascript

详解Angular结合zTree异步加载节点数据

Jan 20 Javascript

Node.js爬虫如何获取天气和每日问候详解

Aug 26 Javascript

vue实现输入框的模糊查询的示例代码（节流函数的应用场景）

Sep 01 Javascript

javascript实现前端成语点击验证优化

Jun 24 Javascript

理解javascript定时器中的setTimeout与setInterval

Feb 23 #Javascript

Web开发必知Javascript技巧大全

Feb 23 #Javascript

JQUERY表单暂存功能插件分享

Feb 23 #Javascript

JavaScript简单实现鼠标移动切换图片的方法

Feb 23 #Javascript

jQuery实现返回顶部功能

Feb 23 #Javascript

JavaScript添加随滚动条滚动窗体的方法

Feb 23 #Javascript

理解javascript定时器中的单线程

Feb 23 #Javascript

You might like

初学PHP的朋友经常问的一些问题。不断更新

2011/08/11 PHP

Linux下CoreSeek及PHP扩展模块的安装

2012/09/23 PHP

php使用curl获取https请求的方法

2015/02/11 PHP

php实现批量修改文件名称的方法

2016/07/23 PHP

[原创]PHP实现SQL语句格式化功能的方法

2017/07/28 PHP

PHP基于Closure类创建匿名函数的方法详解

2017/08/17 PHP

PHP实现广度优先搜索算法(BFS,Broad First Search)详解

2017/09/16 PHP

php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)

2020/02/15 PHP

使用jQuery内容过滤选择器选择元素实例讲解

2013/04/18 Javascript

js动态给table添加/删除tr的方法

2013/08/02 Javascript

Jquery实现自定义窗口随意的拖拽

2014/03/12 Javascript

很全面的JavaScript常用功能汇总集合

2016/01/22 Javascript

Angular 根据 service 的状态更新 directive

2016/04/03 Javascript

JavaScript 过滤关键字

2017/03/20 Javascript

利用Vue实现移动端图片轮播组件的方法实例

2017/08/23 Javascript

基于Vue过渡状态实例讲解

2017/09/14 Javascript

vue全局组件与局部组件使用方法详解

2018/03/29 Javascript

node.js利用socket.io实现多人在线匹配联机五子棋

2018/05/31 Javascript

怎样在vue项目下添加ESLint的方法

2019/05/16 Javascript

vue h5移动端禁止缩放代码

2019/10/28 Javascript

微信小程序之导航滑块视图容器功能的实现代码(简单两步)

2020/06/19 Javascript

[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2

2014/07/15 DOTA

Python无损音乐搜索引擎实现代码

2018/02/02 Python

python2.6.6如何升级到python2.7.14

2018/04/08 Python

Django开发中的日志输出的方法

2018/07/02 Python

python点击鼠标获取坐标（Graphics）

2019/08/10 Python

python实现高斯判别分析算法的例子

2019/12/09 Python

小 200 行 Python 代码制作一个换脸程序

2020/05/12 Python

Pygame框架实现飞机大战

2020/08/07 Python

加拿大著名时装品牌：SOIA & KYO

2016/08/23 全球购物

Mio Skincare英国官网：身体紧致及孕期身体护理

2018/08/19 全球购物

分厂厂长岗位职责

2013/12/29 职场文书

搞笑婚礼主持词

2014/03/13 职场文书

学校门卫岗位职责

2014/03/16 职场文书

四风自我剖析材料

2014/09/30 职场文书

python glom模块的使用简介

2021/04/13 Python