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

Javascript this关键字使用分析

Oct 21 Javascript

基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果分享

Jun 24 Javascript

flash调用js中的方法,让js传递变量给flash的办法及思路

Aug 07 Javascript

使用npm发布Node.JS程序包教程

Mar 02 Javascript

深入理解JavaScript系列（18）：面向对象编程之ECMAScript实现

Mar 05 Javascript

jquery+css3实现网页背景花瓣随机飘落特效

Aug 17 Javascript

Javascript 计算字符串在localStorage中所占字节数

Oct 21 Javascript

原生JavaScript实现异步多文件上传

Dec 02 Javascript

JS+CSS实现闪烁字体效果代码

Apr 05 Javascript

微信禁止下拉查看URL的处理方法

Sep 28 Javascript

原生javascript AJAX 三级联动的实现代码

May 04 Javascript

JSONP 的原理、理解与实例分析

May 16 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模板,主要想体现一下思路

2006/12/25 PHP

PHP基础之运算符的使用方法

2013/04/28 PHP

网页中的图片的处理方法与代码

2009/11/26 Javascript

jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法

2011/07/28 Javascript

JavaScript数字和字符串转换示例

2014/03/26 Javascript

超炫的jquery仿flash导航栏特效

2014/11/11 Javascript

js简单实现竖向tab选项卡的方法

2015/05/04 Javascript

JQuery实现的图文自动轮播效果插件

2015/06/19 Javascript

JavaScript代码生成PDF文件的方法

2016/02/26 Javascript

Node.js实用代码段之获取Buffer对象字节长度

2016/03/17 Javascript

jQuery 选择器（61种）整理总结

2016/09/26 Javascript

js利用appendChild对标签进行排序的实现方法

2016/10/16 Javascript

JS出现失效的情况总结

2017/01/20 Javascript

JS给按钮添加跳转功能类似a标签

2017/05/30 Javascript

详解create-react-app 自定义 eslint 配置

2018/06/07 Javascript

vue中的适配px2rem示例代码

2018/11/19 Javascript

vue设置动态请求地址的例子

2019/11/01 Javascript

vue 封装面包屑组件教程

2020/11/16 Javascript

Python break语句详解

2014/03/11 Python

pymssql数据库操作MSSQL2005实例分析

2015/05/25 Python

python从入门到精通（DAY 2）

2015/12/20 Python

Python实现将sqlite数据库导出转成Excel(xls)表的方法

2017/07/17 Python

Django自定义全局403、404、500错误页面的示例代码

2020/03/08 Python

Python新手如何进行闭包时绑定变量操作

2020/05/29 Python

Python 解析库json及jsonpath pickle的实现

2020/08/17 Python

CSS3实现缺角矩形，折角矩形以及缺角边框

2019/12/20 HTML / CSS

一套带网友答案的.NET笔试题

2016/12/06 面试题

翻译专业应届生求职信

2013/11/23 职场文书

上班打牌检讨书

2014/02/07 职场文书

幼儿园大班家长评语

2014/04/17 职场文书

化工专业求职信

2014/07/01 职场文书

专业技术职务聘任证明

2015/03/02 职场文书

交心谈心活动总结

2015/05/11 职场文书

Python中Permission denied的解决方案

2021/04/02 Python

关于python中模块和重载的问题

2021/11/02 Python

关于JS中的作用域中的问题思考分享

2022/04/06 Javascript