Bootstrap多个手风琴折叠展开效果 - 好文

Bootstrap多个手风琴点击的效果：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <meta
name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/> <link rel="stylesheet" href="css/bootstrap.min.css" /> <style> </style>
</head> <body> <div class="container"> <div class="row"> <div
class="panel-group" id="shoufengqing"> <div class="panel panel-default"> <div
data-parent="#shoufengqing" data-toggle="collapse" data-target="#div1"
class="panel-heading"> <h3 class="panel-title">我是标题1</h3> </div> <div id="div1"
class="collapse in"> <div class="panel-body"> <p>订单管理</p> <p>内容管理</p>
<p>价格管理</p> </div> </div> </div> <div class="panel panel-default"> <div
data-parent="#shoufengqing" data-toggle="collapse" data-target="#div2"
class="panel-heading"> <h3 class="panel-title">我是标题1</h3> </div> <div id="div2"
class="collapse"> <div class="panel-body"> <p>标识管理</p> <p>图片管理</p> <p>设置管理</p>
</div> </div> </div> <div class="panel panel-default"> <div
data-parent="#shoufengqing" data-toggle="collapse" data-target="#div3"
class="panel-heading"> <h3 class="panel-title">我是标题1</h3> </div> <div id="div3"
class="collapse"> <div class="panel-body"> <p>其它管理1</p> <p>其它管理2</p>
<p>其它管理3</p> </div> </div> </div> </div> </div> </div> <script
type="text/javascript" src="js/jquery-2.1.0.js"></script> <script
src="js/bootstrap.min.js"></script> <script> $(function() { }); </script>
</body> </html>

热门工具换一换