首页 > 代码库 > 【JavaScript】使用Bootstrap来编写 选择折叠项collapse

【JavaScript】使用Bootstrap来编写 选择折叠项collapse

2024-07-30 07:49:13   220人阅读

选择折叠项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=http://www.mamicode.com/"css/bootstrap.css" rel="stylesheet" media="screen">>


（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=http://www.mamicode.com/"css/bootstrap.css" rel="stylesheet" media="screen">>
（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=http://www.mamicode.com/"#collapse1" aria-expanded="true" aria-controls="collapse1">>

（1）<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=http://www.mamicode.com/"css/bootstrap.css" rel="stylesheet" media="screen">>
【JavaScript】使用Bootstrap来编写 选择折叠项collapse


联系
我们