首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
遍历DOM对象内的元素属性示例代码
Feb 08 Javascript
javascript版的in_array函数（判断数组中是否存在特定值）
May 09 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
微信小程序实现折线图的示例代码
Jun 07 Javascript
jquery实现直播弹幕效果
Nov 28 jQuery
vue项目中微信登录的实现操作
Sep 08 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
S400(1) S500(1) Grundig(1) H-501(1) S700(1) ATS-909X(1) BCL3000(2) SANGEAN(1) PL990(2) ICF-SW07(1)
You might like
php设置编码格式的方法
2013/03/05 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
python中zip()方法应用实例分析
2016/04/16 Python
python截取两个单词之间的内容方法
2018/12/25 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
廉政教育心得体会
2014/01/01 职场文书
英文导游欢迎词
2014/01/11 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
职业生涯规划书前言
2014/04/15 职场文书
大学学风建设方案
2014/05/04 职场文书
刑事上诉状（无罪）
2015/05/23 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
python百行代码实现汉服圈图片爬取
2021/11/23 Python
人民币符号
2022/02/17 杂记