Bootstarp创建可折叠的组件_javascript技巧
本文将学习如何通过 Bootstarp 创建可折叠的组件，具体内容如下
什么是必需的
您必须引用 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 过渡效果也已执行完毕），此事件被触发。
以上就是本文的全部内容，希望对大家的学习有所帮助。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
如何安装Win10旧版本组件DirectPlay
Dec 28, 2023 pm 03:43 PM
不少用户在玩win10的的一些游戏的时候总是会遇到一些问题，比如说卡屏和花屏等等情况，这个时候我们是可以采用打开directplay这个功能来解决的，而且功能的操作方法也很简单。win10旧版组件directplay怎么安装1、在搜索框里面输入“控制面板”然后打开2、查看方式选择大图标3、找到“程序和功能”4、点击左侧的启用或关闭win功能5、选择旧版这里的勾选上就可以了
谷歌 Pixel 9 Pro Fold 手机壳曝光：外屏 6.4 英寸、内屏 8.02 英寸
Jun 25, 2024 pm 02:35 PM
6月25日消息，消息源ytechb昨日（6月24日）发布博文，分享了谷歌Pixel9ProFold手机壳渲染图，再次展示了这款折叠屏背面的设计。此前消息，谷歌将于今年10月发布Pixel9系列手机，除了Pixel9系列三款手机之外，PixelFold也纳入到Pixel9系列中，正式上架后名称为Pixel9ProFold。本次曝光的手机壳来自配件厂商Torro，该公司的英国和美国在线商店已经列出了该产品手机壳，并披露了这款手机的设计和显示屏尺寸。页面中展示了大量Pixel9ProFold手机壳渲染
三星万元折叠机皇W25曝光：500万像素屏下前摄 机身更薄了
Aug 23, 2024 pm 12:43 PM
8月23日消息，三星即将推出新款折叠手机W25，预计9月底亮相，将在屏下前摄、机身厚度上作出相应的提升。据报道，三星W25代号为Q6A，将配备500万像素屏下摄像头，相较于GalaxyZFold系列的400万像素摄像头有所提升。此外，W25的外屏前置摄像头和超广角摄像头预计分别为1000万和1200万像素。在设计上，W25折叠状态下的厚度约为10毫米，比标准版GalaxyZFold6薄约2毫米。屏幕方面，W25的外屏为6.5英寸，内屏为8英寸，而GalaxyZFold6的外屏为6.3英寸，内屏为
如何使用 Vue 实现日历组件？
Jun 25, 2023 pm 01:28 PM
Vue是一款非常流行的前端框架，它提供了很多工具和功能，如组件化、数据绑定、事件处理等，能够帮助开发者构建出高效、灵活和易维护的Web应用程序。在这篇文章中，我来介绍如何使用Vue实现一个日历组件。1、需求分析首先，我们需要分析一下这个日历组件的需求。一个基本的日历应该具备以下功能：展示当前月份的日历页面；支持切换到前一月或下一月；支持点击某一天，
三星Galaxy Z Flip 6机模首曝：边框更窄 折痕依然存在
Jun 22, 2024 am 03:28 AM
6月21日消息，近日，外媒在网络上放出了三星GalaxyZFlip6的机模照片。根据图片可以了解到，三星GalaxyZFlip6的边框将进一步收窄，这意味着手机在折叠状态下的宽度可能会减小，也将会提供更舒适的握持感和便携性。而且，GalaxyZFlip6的机模相比上一代ZFlip5，整机显得更加方正一些，背面的摄像头模块也要更加突出，预计是采用了新的相机传感器。不过，从正面看上去，手机的折痕依然比较明显，但考虑到泄露的是模型机，与真机可能会会有些许差距，因此仅供参考。在性能配置方面，Galaxy
折叠屏手机最大短板：没有核心应用场景
Mar 16, 2024 am 09:04 AM
我们今天探讨的并非某一款产品到底怎么样，而是回归到“折叠屏”话题本身上来，探究一下折叠屏手机的“合理性”。首先还是看一看折叠屏手机的市场表现，根据IDC最新数据报告显示，2023年全年中国折叠屏手机市场出货量约700.7万台，同比增长114.5%。其中，2023年第四季度中国折叠屏手机市场出货量约277.1万台，同比增长149.6%，数据看上去确实还不错，增长也很强势。不过与2023年中国市场智能手机2.7亿左右出货量相比，这个数据就着实不太够看了。总的来说
IDC 预估 2024 全球智能手机出货量 12 亿部：折叠屏 2500 万部，同比增长 37%
Feb 24, 2024 pm 02:20 PM
2月24日消息，IDC近日发布市场研究报告，预估2024年全球智能手机出货量将达到12亿部，同比增长2.8%，随后到2028年将保持较低的个位数增长。IDC认为2024年总体出货量仍低于大流行前的水平，但全球智能手机市场已经走出低谷，开始呈现复苏上扬趋势。IDC认为推动整体市场复苏的两个关键因素，其一是设备更新周期，其二新兴市场需求的增长。另外还有两个主要驱动力，IDC预估折叠屏手机2024年出货量将达到2500万部，同比增长37%；另外就是人工智能（AI）已迅速成为智能手机讨论的一部分，引发了
你想知道word折叠吗
Mar 19, 2024 pm 07:49 PM
在word编辑文本内容后，需要查看检查所编辑的内容。如果内容较多时，查阅比较不方便，如何解决这个问题呢，这时就需要word折叠的方法。下面就让小编跟各位小伙伴们分享下方法教程吧！首先，打开电脑上的Word文档，输入所需内容并选中，然后单击菜单栏中的“开始”选项，接着选择一个样式应用到刚才选中的文字段落中。你可以参考下方图片中标有红色圈的部分。2.然后这样，选中的文字段落就变换了样式，多了一个小箭头，如下方图片红色圈中部分所示：3.点击小箭头就能自由展开或者折叠先前所选的文字段落，或者直接右键，从
