bootstrap手风琴折叠

手风琴折叠

直接复制代码，然后配置好你的bootstrap.css和jquery.js还有bootstrap.js（如果没有效果可能是你的这3个文件引入路径有问题，我的js文件都在页面的最下面）,即可验证以下代码，我的代码中都写了详细注释，经供参考

1.第一个是最基本的折叠菜单，一个按钮加上一个div

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><title>XXX</title><link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
</head>
<body style="margin: 200px;">
<!--基本实例-->
<button class="btn btn-primary" data-toggle="collapse" data-target="#content">Bootstrap
</button>
<div class="collapse" id="content"><div class="well">Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/HTML 框架。目前,Bootstrap 最新版本为 3.0 。</div>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
</body></html>

2.手风琴折叠简单版本

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><title>XXX</title><link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
</head>
<body style="margin: 200px;"><!--1、折叠部分设置一个id2、在被点击的连接处引入<a href="#collapseOne"3、还是在被点击的连接处加入  date-toggle="collapse"4、写完之后第一次不正常，所以需要在折叠部分写上class=“collapse”（表示一开始隐藏）或者 “collapse in”（表示一开始展开）-->
<div class="panel-group"><!–大容器–><div class="panel panel-default"><!–这个表示第一个整块儿的–><div class="panel-heading"><!–第一部分，被点击部分–><h4 class="panel-title"><a href="#collapseOne" data-toggle="collapse">1号连接</a></h4></div><div class="panel-collapse collapse" id="collapseOne"><!–第二部分，折叠部分–><div class="panel-body">1号内容</div></div></div><div class="panel panel-default"><!–这个表示第一个整块儿的–><div class="panel-heading"><!–第一部分，被点击部分–><h4 class="panel-title"><a href="#collapseTwo" data-toggle="collapse">2号连接</a></h4></div><div class="panel-collapse collapse" id="collapseTwo"><!–第二部分，折叠部分–><div class="panel-body">2号内容</div></div></div><div class="panel panel-default"><!–这个表示第一个整块儿的–><div class="panel-heading"><!–第一部分，被点击部分–><h4 class="panel-title"><a href="#collapseThree" data-toggle="collapse">3号连接</a></h4></div><div class="panel-collapse collapse" id="collapseThree"><!–第二部分，折叠部分–><div class="panel-body">3号内容</div></div></div></div>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script></body></html>

3.手风琴折叠实现点击某一项其他的隐藏

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><title>XXX</title><link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
</head>
<body style="margin: 200px;"><!--点击某一展开，其他的都自动折叠1、给大容器加一个id    id="accordion"2、给每一个被点击链接加上一个  data-parent="#accordion"
-->
<div class="panel-group" id="accordion"><!--大容器--><div class="panel panel-default"><!--这个表示第一个整块儿的--><div class="panel-heading"><!--第一部分，被点击部分--><h4 class="panel-title"><a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">1号连接</a></h4></div><div class="panel-collapse collapse" id="collapseOne"><!--第二部分，折叠部分--><div class="panel-body">1号内容</div></div></div><div class="panel panel-default"><!--这个表示第一个整块儿的--><div class="panel-heading"><!--第一部分，被点击部分--><h4 class="panel-title"><a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">2号连接</a></h4></div><div class="panel-collapse collapse" id="collapseTwo"><!--第二部分，折叠部分--><div class="panel-body">2号内容</div></div></div><div class="panel panel-default"><!--这个表示第一个整块儿的--><div class="panel-heading"><!--第一部分，被点击部分--><h4 class="panel-title"><a href="#collapseThree" data-toggle="collapse" data-parent="#accordion">3号连接</a></h4></div><div class="panel-collapse collapse" id="collapseThree"><!--第二部分，折叠部分--><div class="panel-body">3号内容</div></div></div></div>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script></body></html>

4.介绍一下折叠的几个事件

Collapse 插件中事件有四种。

事件类型	描述
show.bs.collapse	在 show方法调用时立即触发
shown.bs.collapse	折叠区完全显示出来是触发
hide.bs.collapse	在 hide方法调用时触发
hidden.bs.collapse	该事件在折叠区域完全隐藏之后触发

事件调用方式（collapseOne是被点击的那个a链接），其他雷同

$('#collapseOne').on('show.bs.collapse', function () {
alert(' 当 show 方法调用时触发 ');
});

bootstrap手风琴折叠相关推荐

bootstrap手风琴_快速提示：如何自定义Bootstrap 4的手风琴组件
bootstrap手风琴在此快速提示中,我们将构建Bootstrap 4手风琴,通过一些CSS更改对其进行定制,并应用一些JavaScript定制. 让我们开始吧! 注意 :本教程假定您对Boots ...
jQueryHTMLCSS3实现垂直手风琴折叠菜单方法讲解
在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...
html折叠手风琴效果,jQuery制作效果超棒的手风琴折叠菜单
拉风的jQuery制作的手风琴折叠菜单,效果非常不错!这里是之前版本的改进版,主要是jquery代码改进演示图: main.js $(function(){ var tmp = null, $tit ...
【BootStrap】--折叠插件
前言研究BootStrap的折叠插件的时候,发现这个东西很方便,即能显示标题,又能查看当前页的详细内容,很适合做新生入学系统公约显示功能. 效果图点击食堂就餐公约,显示当前页,而且保证有且只有一个 ...
uniapp实现带过渡动画的手风琴折叠样式
目录最终效果一.无过渡动画的手风琴二.有过渡动画的手风琴 1. 不能再用v-if或v-show 2. 用:class动态绑定样式 3. 子元素也要设置transition 最终效果 UI同学让做 ...
Bootstrap完成折叠效果（手风琴）
老样子,Bootstrap要完成手风琴效果---首先要引用相应的collapse.js,或者直接如下: <script src="js/jquery-1.11.3.js" r ...
Bootstrap多个手风琴折叠展开效果
Bootstrap多个手风琴点击的效果: <!DOCTYPE html> <html><head><meta charset="utf-8" ...
面板——卡片面板、常规折叠面板、手风琴折叠
1. 卡片面板 2. 普通折叠面板 3. 手风琴面板在普通面板上加 lay-accordion="" <%@ page language="java" ...
Bootstrap手风琴菜单
手风琴菜单似乎已经成了网站后台的标配了,怎么写一个手风琴式的菜单呢?如果你利用原生js去写可能会比较麻烦,但利用Bootstrap框架的Collapse.js插件就变得简单啦. 你可以直接用官网的de ...