首页
所有分类
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获取IFRAME当前的URL的方法
Nov 13 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
JSON 对象未定义错误的解决方法
Sep 29 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
微信小程序webSocket的使用方法
Feb 20 Javascript
JavaScript实现栈结构Stack过程详解
Mar 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
zip(1) 自动化(1) Bean(3) 进销存(1) enumerate(1) list(1) IOC(3) find(1) csv(4) metaclass(1)
You might like
php 调用远程url的六种方法小结
2009/11/02 PHP
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
写出高质量的PHP程序
2012/02/04 PHP
php-app开发接口加密详解
2018/04/18 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
vue自定义指令实现方法详解
2019/02/11 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
Python脚本实现12306火车票查询系统
2016/09/30 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
Django 批量插入数据的实现方法
2020/01/12 Python
keras多显卡训练方式
2020/06/10 Python
解决pyinstaller 打包exe文件太大，用pipenv 缩小exe的问题
2020/07/13 Python
街头时尚在线：JESSICABUURMAN
2019/06/16 全球购物
园林设计师自荐信
2013/11/18 职场文书
退伍老兵事迹材料
2014/01/31 职场文书
两只小狮子教学反思
2014/02/05 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
技术员个人工作总结
2015/03/03 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
给校长的建议书范文
2015/09/14 职场文书
处世之道：关于真诚相待的名言推荐
2019/12/02 职场文书
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript
Fluentd搭建日志收集服务
2022/09/23 Servers