1、一些被修改的：
2.3版本的 3.0版本
.accordion |
.panel-group |
.accordion-group |
.panel .panel-default |
.accordion-heading |
.panel-heading |
.accordion-body |
.panel-collapse |
.accordion-inner |
.panel-body |
3、基本代碼：
- <!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" />
- <link rel="stylesheet" href="dist/css/bootstrap.css">
- <script type="text/javascript" src="dist/js/jquery.js"></script>
- <script type="text/javascript" src="dist/js/bootstrap.js"></script>
- <script type="text/javascript" src="bootstrap/js/collapse.js"></script>
- <title>無標題文檔</title>
- </head>
- <body style="margin:200px;">
- <div class="panel-group" id="accordion">
- <div class="panel panel-default">
- <div class="panel-heading">
- <div class="panel-title">
- <a href="#panel1" class="panel-toggle" data-toggle="collapse" data-parent="#accordion">
- 卡1
- </a>
- </div>
- </div>
- <div id="panel1" class="panel-collapse collapse in">
- <div class="panel-body">
- 卡1內容
- </div>
- </div>
- </div>
- <div class="panel panel-default">
- <div class="panel-heading">
- <div class="panel-title">
- <a href="#panel2" class="panel-toggle" data-toggle="collapse" data-parent="#accordion">
- 卡2
- </a>
- </div>
- </div>
- <div id="panel2" class="panel-collapse collapse in">
- <div class="panel-body">
- 卡2內容
- </div>
- </div>
- </div>
- </div>
- <script>
- $('.collapse').collapse({
- toggle: true,parent:'#accordion'
- })
- $('.panel-heading').on('click', function () {
- var self = this;
- $(self).nextAll().eq(0).collapse("show");
- })
- </script>
- </body>
- </html>
4、效果圖：
