- <!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>
- <link rel="stylesheet" href="./public/bootstrap/css/bootstrap.css">
- <script type="text/javascript" src="public/bootstrap/js/bootstrap.js"></script>
- <script type="text/javascript" src="public/bootstrap/js/jquery.js"></script>
- <script type="text/javascript" src="bootstrap/js/bootstrap-collapse.js"></script>
- <script type="text/javascript" src="bootstrap/js/bootstrap-collapse.js"></script>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- </head>
- <body>
- <div class="container" style="margin:100px;">
- <div class="accordion" id="main">
- <div class="accordion-group">
- <div class="accordion-heading">
- <a class="accordion-toggle" data-parent="main" href="#1">卡1</a>
- </div>
- <div id="1" class="accordion-body collapse in" >
- <div class="accordion-inner">
- 卡1内容
- </div>
- </div>
- </div>
- <div class="accordion-group">
- <div class="accordion-heading">
- <a class="accordion-toggle" data-parent="main" href="#2">卡2</a>
- </div>
- <div id="2" class="accordion-body collapse in" >
- <div class="accordion-inner">
- 卡2内容
- </div>
- </div>
- </div>
- </div>
- </div>
- <script type="text/javascript">
- $(".accordion-body").collapse({
- toggle: true,parent:'#main'
- })
- $('.accordion-heading').on('click', function () {
- var self = this;
- $(self).nextAll().eq(0).collapse("show");
- })
- </script>
- </body>
- </html>
效果图: