【Bootstrap】选择折叠项collapse

选择折叠项collapse在网页中并不常用，不过也并不少见。

这也算是一个比较实用的组件。

折叠项collapse在默认情况下仅能有一项是处于打开状态的。

一、基本目标

使用Bootstrap来编写如下图的选择折叠项：

其中服务条款2在打开网页的时候就是打开状态。

点击不同的折叠项，其余的项就会收起，这项就会打开。

二、制作过程

1.同之前《【JavaScript】使用Bootstrap来编写一个在当前网页弹出的对话框，可以关闭，不用跳转，非弹窗》的第一步（点击打开链接）

因为需要使用Bootstrap，所以先在官网（点击打开链接）下载组件即可，用于生产环境的Bootstrap版本（点击打开链接），Bootstrap3对2并不兼容，建议直接根据其开发文档使用Bootstrap3。本文也是根据Bootstrap3制作。同时，Bootstrap3所提供的JavaScript效果需要到jQuery1.11（点击打开链接）支持，可以到jQuery官网中下载兼容旧浏览器IE6的jQuery1.11（点击打开链接），而不是不兼容旧浏览器IE6的jQuery2。下载完之后，配置好站点目录。把Bootstrap3直接解压到站点目录，而把jquery-1.11.1.js放到js目录，也就是与bootstrap.js同一目录，站点文件夹的结构大致如下：

2.本网页编码如下，下面一个片段一个片段进行分析：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>选择折叠项</title><meta name="viewport"content="width=device-width,initial-scale=1.0,user-scalable=no"><link href="css/bootstrap.css" rel="stylesheet" media="screen"><script type="text/javascript" src="js/jquery-1.11.1.js"></script><script type="text/javascript" src="js/bootstrap.js"></script></head><body><div class="panel-group" id="accordion" role="tablist"aria-multiselectable="true"><div class="panel panel-info"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion"href="#collapse1" aria-expanded="true" aria-controls="collapse1">服务条款1 </a></h4></div><div id="collapse1" class="panel-collapse collapse" role="tabpanel"><div class="panel-body"><a href="http://1.com">点我进入某网页1</a><br />本协议服务条款具有法律效力。<br />本协议服务条款具有法律效力。<br />本协议服务条款具有法律效力。<br />本协议服务条款具有法律效力</div></div></div><div class="panel panel-warning"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion"href="#collapse2" aria-expanded="true" aria-controls="collapse2">服务条款2 </a></h4></div><div id="collapse2" class="panel-collapse collapse in"role="tabpanel"><div class="panel-body"><a href="http://2.com">点我进入某网页2</a><br />本协议服务条款具有法律效力。<br />本协议服务条款具有法律效力。<br />本协议服务条款具有法律效力。<br />本协议服务条款具有法律效力</div></div></div><div class="panel panel-danger"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion"href="#collapse3" aria-expanded="false" aria-controls="collapse3">服务条款3 </a></h4></div><div id="collapse3" class="panel-collapse collapse" role="tabpanel"><div class="panel-body"><a href="http://3.com">点我进入某网页3</a><br />本协议服务条款具有法律效力。<br />本协议服务条款具有法律效力。<br />本协议服务条款具有法律效力。<br />本协议服务条款具有法律效力</div></div></div><div class="panel panel-success"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion"href="#collapse4" aria-expanded="true" aria-controls="collapse4">服务条款4 </a></h4></div><div id="collapse4" class="panel-collapse collapse" role="tabpanel"><div class="panel-body"><a href="http://1.com">点我进入某网页4</a><br />本协议服务条款具有法律效力。<br />本协议服务条款具有法律效力。<br />本协议服务条款具有法律效力。<br />本协议服务条款具有法律效力</div></div></div></div></body>
</html>

（1）<head>部分，同之前《【JavaScript】使用Bootstrap来编写一个在当前网页弹出的对话框，可以关闭，不用跳转，非弹窗》的<head>部分（点击打开链接）

 <head><!--页面编码--><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>模态框</title><!--要求本网页自动适应PC、平板、手机等设备的屏幕--><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><!--本例需要三个外部插件所支持--><link href="css/bootstrap.css" rel="stylesheet" media="screen"><script type="text/javascript" src="js/jquery-1.11.1.js"></script><script type="text/javascript" src="js/bootstrap.js"></script></head>

（2）<body>部分，就是一个选择折叠项collapse

collapse的布局如下图，

于是就有了如下代码：

  <!--声明一个选择折叠项的布局--><div class="panel-group" id="accordion" role="tablist"aria-multiselectable="true"><!--这是每个选择折叠项的标题样式，有panel-default/info/success/warning/danger任君选择--><div class="panel panel-info"><!--声明一个标题部分的布局--><div class="panel-heading"><!--标题字体也可以通过样式修饰--><h4 class="panel-title"><!--这么多参数的超级链接是根据bootstrap的中文文档添加的，为能够正确打开每一个选择折叠项做准备--><a data-toggle="collapse" data-parent="#accordion"href="#collapse1" aria-expanded="true" aria-controls="collapse1">服务条款1 </a></h4></div><!--这是为了tab快捷键能够在选择折叠项之间切换做准备，--><!--其中class="panel-collapse collapse"默认是关闭状态，class="panel-collapse collapse in"则默认为打开状态，--><!--每个总的选择折叠项，只能有一个class="panel-collapse collapse in"。--><div id="collapse1" class="panel-collapse collapse" role="tabpanel"><!--选择折叠项主体的布局，中间能够放入任何东西--><div class="panel-body"><a href="http://1.com">点我进入某网页1</a><br />本协议服务条款具有法律效力。<br />本协议服务条款具有法律效力。<br />本协议服务条款具有法律效力。<br />本协议服务条款具有法律效力</div></div></div><!--下面的每一个选择折叠项的道理是完全一样的，不再赘述--><div class="panel panel-warning"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion"href="#collapse2" aria-expanded="true" aria-controls="collapse2">服务条款2 </a></h4></div><div id="collapse2" class="panel-collapse collapse in"role="tabpanel"><div class="panel-body"><a href="http://2.com">点我进入某网页2</a><br />本协议服务条款具有法律效力。<br />本协议服务条款具有法律效力。<br />本协议服务条款具有法律效力。<br />本协议服务条款具有法律效力</div></div></div><div class="panel panel-danger"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion"href="#collapse3" aria-expanded="false" aria-controls="collapse3">服务条款3 </a></h4></div><div id="collapse3" class="panel-collapse collapse" role="tabpanel"><div class="panel-body"><a href="http://3.com">点我进入某网页3</a><br />本协议服务条款具有法律效力。<br />本协议服务条款具有法律效力。<br />本协议服务条款具有法律效力。<br />本协议服务条款具有法律效力</div></div></div><div class="panel panel-success"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion"href="#collapse4" aria-expanded="true" aria-controls="collapse4">服务条款4 </a></h4></div><div id="collapse4" class="panel-collapse collapse" role="tabpanel"><div class="panel-body"><a href="http://1.com">点我进入某网页4</a><br />本协议服务条款具有法律效力。<br />本协议服务条款具有法律效力。<br />本协议服务条款具有法律效力。<br />本协议服务条款具有法律效力</div></div></div></div>

【Bootstrap】选择折叠项collapse相关推荐

Bootstrap 折叠插件Collapse 调用方式
调用方式 Bootstrap折叠插件Collapse的结构相对复杂,但调用比较简单,可以通过data属性调用,也可以通过JavaScript调用. 1.data 属性调用要激活折叠插件的激活行为,首 ...
Bootstrap 折叠插件Collapse 事件
事件 Bootstrap还为折叠组件Collapse提供了一组事件,通过这些事件,可以监听用户的行为及折叠组件的状态.这些事件及含义见表 5‑8. 表 5‑8 折叠插件的事件及含义事件含义 sho ...
Bootstrap 折叠插件Collapse 选项
选项 Bootstrap折叠插件Collapse有2 个选项,一个是parent,一个是toggle,所有的选项都可以通过 data 属性或JavaScript进行设置.见表 5‑7. 表 5‑7 B ...
【BootStrap】--折叠插件
前言研究BootStrap的折叠插件的时候,发现这个东西很方便,即能显示标题,又能查看当前页的详细内容,很适合做新生入学系统公约显示功能. 效果图点击食堂就餐公约,显示当前页,而且保证有且只有一个 ...
bootstrap手风琴折叠
手风琴折叠直接复制代码,然后配置好你的bootstrap.css和jquery.js还有bootstrap.js(如果没有效果可能是你的这3个文件引入路径有问题,我的js文件都在页面的最下面),即可 ...
Bootstrap完成折叠效果（手风琴）
老样子,Bootstrap要完成手风琴效果---首先要引用相应的collapse.js,或者直接如下: <script src="js/jquery-1.11.3.js" r ...
html5中折叠面板,Ant Design中折叠面板Collapse
这段时间做react项目遇到一些平常并不会去在意的问题,但解决的时候又需要思考一番.这次开发用到了蚂蚁金服的UI框架Ant Design.项目中有一个模块的样式和功能用到了折叠面板Collapse组件 ...
台式电脑、笔记本快捷选择启动项Boot 快捷键大全
我们在安装系统时,会去设置电脑是从硬盘启动.U盘启动.光驱启动.网卡启动. 一般设置的方法有两种:一种是进BIOS主板菜单设置启动项顺序:另一种就是我在这里要介绍的快捷选择启动项. 以下是网友整理的各 ...
ant design vue 表格table 默认选择几项getCheckboxProps
首先我们看一下场景在table组件里默认选择第一项,如下图所示: 查看table文档后发现只有getCheckboxProps或许能修改checkbox 文档说是一个函数,然后就写一个方法,有一个默认 ...
java中访问修饰符限制性最高的是,问：JAVA中，访问修饰符限制性最高的是( )。(选择一项）...
问:JAVA中,访问修饰符限制性最高的是( ).(选择一项) A:friendly,B:protected ,C:private ,D:public 正确答案:绛旓細铻烘棆姊ā寮? 绛旓細鑷富鎬? ...

【Bootstrap】选择折叠项collapse

【Bootstrap】选择折叠项collapse相关推荐

最新文章

热门文章