用bootstrap實現手風琴效果
阿新 • • 發佈：2018-11-07
<!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"> <title></title> <link href="./css/bootstrap.css" rel="stylesheet"> <script src="./js/html5shiv.min.js"></script> <script src="./js/respond.min.js"></script> </head> <body> <div class="container"> <h3>bootstrap第四部分:外掛---摺疊效果</h3> <h3>摺疊效果應用1:手風琴</h3> <div class="panel-group" id="pg"> <!--第一個面板--> <div class="panel panel-danger"> <div class="panel-heading"> <a class="panel-title" data-parent="#pg" data-toggle="collapse" href="#xyj">西遊記簡介</a> </div> <div id="xyj" class="collapse in panel-collapse"> <div class="panel-body"> 講述了一個和尚和四個動物的故事 講述了一個和尚和四個動物的故事 講述了一個和尚和四個動物的故事 講述了一個和尚和四個動物的故事 講述了一個和尚和四個動物的故事 講述了一個和尚和四個動物的故事 </div> </div> </div> <!--第二個面板--> <div class="panel panel-success"> <div class="panel-heading"> <a class="panel-title" data-parent="#pg" data-toggle="collapse" href="#shz">水滸傳簡介</a> </div> <div id="shz" class="collapse panel-collapse"> <div class="panel-body"> 講述了105個男人和三個女人的故事 講述了105個男人和三個女人的故事 講述了105個男人和三個女人的故事 講述了105個男人和三個女人的故事 講述了105個男人和三個女人的故事 講述了105個男人和三個女人的故事 講述了105個男人和三個女人的故事 講述了105個男人和三個女人的故事 </div> </div> </div> <!--第三個面板--> <div class="panel panel-info"> <div class="panel-heading"> <a class="panel-title" data-parent="#pg" data-toggle="collapse" href="#sgz">三國志簡介</a> </div> <div id="sgz" class="collapse panel-collapse"> <div class="panel-body"> 講述了一群人打群架的故事 講述了一群人打群架的故事 講述了一群人打群架的故事 講述了一群人打群架的故事 講述了一群人打群架的故事 講述了一群人打群架的故事 講述了一群人打群架的故事 講述了一群人打群架的故事 </div> </div> </div> </div> </div> <script src="./js/jquery-1.11.3.js"></script> <script src="./js/bootstrap.js"></script> </body> </html>
給panel-group加id,每個a加data-parent屬性指向panel-group的id,即可實現只能有一個展開的效果