编程 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一组验证函数

Dec 20 Javascript

让人期待的2011年度最佳 jQuery 插件分享

Mar 16 Javascript

javascript实现颜色渐变的方法

Oct 30 Javascript

jQuery获取选中内容及设置元素属性的方法

Jul 09 Javascript

js实现正方形颜色从下往上升的效果

Aug 04 Javascript

Node.js插件安装图文教程

May 06 Javascript

jQuery学习之DOM节点的插入方法总结

Jan 22 Javascript

微信小程序-获得用户输入内容

Feb 13 Javascript

js代码延迟一定时间后执行一个函数的实例

Feb 15 Javascript

JavaScript实现前端分页控件

Apr 19 Javascript

使用ionic播放轮询广告的实现方法(必看)

Apr 24 Javascript

JS中getElementsByClassName与classList兼容性问题解决方案分析

Aug 07 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

文章推荐系统(二)

2006/10/09 PHP

php xml实例留言本

2009/03/20 PHP

php 删除cookie方法详解

2014/12/01 PHP

PHP数字金额转换成中文大写显示

2019/01/05 PHP

javascript中的一些注意事项更新中

2010/12/06 Javascript

jQuery层级选择器用法分析

2015/02/10 Javascript

bootstrap table表格插件使用详解

2017/05/08 Javascript

详解angularJS自定义指令间的相互交互

2017/07/05 Javascript

[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼

2014/07/07 DOTA

[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09

2020/12/12 DOTA

跟老齐学Python之从格式化表达式到方法

2014/09/28 Python

python实现计算资源图标crc值的方法

2014/10/05 Python

Python中getattr函数和hasattr函数作用详解

2016/06/14 Python

Python递归函数定义与用法示例

2017/06/02 Python

Python3 中把txt数据文件读入到矩阵中的方法

2018/04/27 Python

windows下添加Python环境变量的方法汇总

2018/05/14 Python

python,Django实现的淘宝客登录功能示例

2019/06/12 Python

Python openpyxl 插入折线图实例

2020/04/17 Python

Keras - GPU ID 和显存占用设定步骤

2020/06/22 Python

python 调用API接口获取和解析 Json数据

2020/09/28 Python

解决python3中os.popen()出错的问题

2020/11/19 Python

加拿大女包品牌：Matt & Nat

2017/05/12 全球购物

英国高档百货连锁店：John Lewis

2017/11/20 全球购物

英国领先的餐饮折扣俱乐部：Gourmet Society

2020/07/26 全球购物

毕业生就业推荐表自我鉴定

2014/03/20 职场文书

六查六看自检自查剖析材料

2014/10/14 职场文书

2014年护理部工作总结

2014/11/14 职场文书

大学生就业推荐表自我评价

2015/03/02 职场文书

少年犯观后感

2015/06/11 职场文书

简爱读书笔记

2015/06/26 职场文书

有关浪费资源的建议书

2015/09/14 职场文书

2016年教师节特级教师获奖感言

2015/12/09 职场文书

2016年政治理论学习心得体会

2016/01/25 职场文书

Ajax 的初步实现(使用vscode+node.js+express框架)

2021/06/18 Javascript

mysql定时自动备份数据库的方法步骤

2021/07/07 MySQL

Win11软件图标固定到任务栏

2022/04/19 数码科技