【Bootstrap】选择折叠项collapse

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

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

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


一、基本目标

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

【Bootstrap】选择折叠项collapse_第1张图片

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

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

【Bootstrap】选择折叠项collapse_第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同一目录,站点文件夹的结构大致如下:

【Bootstrap】选择折叠项collapse_第3张图片


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



	
		
		选择折叠项
		
			
				
				
	

	
		
点我进入某网页1
本协议服务条款具有法律效力。
本协议服务条款具有法律效力。
本协议服务条款具有法律效力。
本协议服务条款具有法律效力
点我进入某网页2
本协议服务条款具有法律效力。
本协议服务条款具有法律效力。
本协议服务条款具有法律效力。
本协议服务条款具有法律效力
点我进入某网页3
本协议服务条款具有法律效力。
本协议服务条款具有法律效力。
本协议服务条款具有法律效力。
本协议服务条款具有法律效力
点我进入某网页4
本协议服务条款具有法律效力。
本协议服务条款具有法律效力。
本协议服务条款具有法律效力。
本协议服务条款具有法律效力



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

	
    	
		
		模态框
        
		
        
		
		
		
	

(2)部分,就是一个选择折叠项collapse

collapse的布局如下图,

【Bootstrap】选择折叠项collapse_第4张图片

于是就有了如下代码:

  
		
点我进入某网页1
本协议服务条款具有法律效力。
本协议服务条款具有法律效力。
本协议服务条款具有法律效力。
本协议服务条款具有法律效力
点我进入某网页2
本协议服务条款具有法律效力。
本协议服务条款具有法律效力。
本协议服务条款具有法律效力。
本协议服务条款具有法律效力
点我进入某网页3
本协议服务条款具有法律效力。
本协议服务条款具有法律效力。
本协议服务条款具有法律效力。
本协议服务条款具有法律效力
点我进入某网页4
本协议服务条款具有法律效力。
本协议服务条款具有法律效力。
本协议服务条款具有法律效力。
本协议服务条款具有法律效力


你可能感兴趣的:(Bootstrap)