编程 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 相关文章推荐

js setattribute批量设置css样式

Nov 26 Javascript

javascript根据时间生成m位随机数最大13位

Oct 30 Javascript

JavaScript返回网页中超链接数量的方法

Apr 03 Javascript

简单实现JS计算器功能

Dec 21 Javascript

jQuery使用ajax方法解析返回的json数据功能示例

Jan 10 Javascript

浅谈JS中的常用选择器及属性、方法的调用

Jul 28 Javascript

vue.js template模板的使用(仿饿了么布局)

Aug 13 Javascript

详解小程序不同页面之间通讯的解决方案

Nov 23 Javascript

vue实现动态显示与隐藏底部导航的方法分析

Feb 11 Javascript

Express结合Webpack的全栈自动刷新

May 23 Javascript

vue fetch中的.then()的正确使用方法

Apr 17 Javascript

element中el-container容器与div布局区分详解

May 13 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自定义函数实现JS的escape的方法示例

2016/07/07 PHP

php解析mht文件转换成html的实例

2017/03/13 PHP

PHP后门隐藏的一些技巧总结

2020/11/04 PHP

JS getMonth()日期函数的值域是0-11

2010/02/15 Javascript

JavaScript中文件上传API详解

2016/04/01 Javascript

JS传值出现中文参数乱码的解决方法

2016/06/30 Javascript

Vue.js每天必学之内部响应式原理探究

2016/09/07 Javascript

Node.js连接mongodb实例代码

2017/06/06 Javascript

Vue2几种常见开局方式详解

2017/09/09 Javascript

JQuery 选择器、DOM节点操作练习实例

2017/09/28 jQuery

Node做中转服务器转发接口

2017/10/18 Javascript

JS中封装axios来管控api的2种方式

2019/09/11 Javascript

使用Vue 自定义文件选择器组件的实例代码

2020/03/04 Javascript

jQuery实现的分页插件完整示例

2020/05/26 jQuery

Javascript异步流程控制之串行执行详解

2020/09/27 Javascript

NestJs使用Mongoose对MongoDB操作的方法

2021/02/22 Javascript

Python使用函数默认值实现函数静态变量的方法

2014/08/18 Python

python导入时小括号大作用

2017/01/10 Python

对python自动生成接口测试的示例讲解

2018/11/30 Python

Python列表list排列组合操作示例

2018/12/18 Python

python频繁写入文件时提速的方法

2019/06/26 Python

Numpy将二维数组添加到空数组的实现

2019/12/05 Python

Pytorch之Tensor和Numpy之间的转换的实现方法

2020/09/03 Python

Python 高效编程技巧分享

2020/09/10 Python

安全员岗位职责

2013/11/11 职场文书

求职自荐信格式

2013/12/04 职场文书

消防安全责任书

2014/04/14 职场文书

给校长的建议书300字

2014/05/16 职场文书

七夕情人节促销方案

2014/06/07 职场文书

测绘工程专业求职信

2014/07/15 职场文书

公安学专业求职信

2014/07/27 职场文书

党的群众路线教育实践活动整改落实情况报告

2014/10/28 职场文书

党委班子纠正“四风”问题整改措施

2014/10/28 职场文书

《围炉夜话》110句人生箴言，精辟有内涵，引人深思

2019/10/23 职场文书

Python基础详解之描述符

2021/04/28 Python

了解Kubernetes中的Service和Endpoint

2022/04/01 Servers