5-4 手风琴--声明式触发手风琴（二）
本节编程练习不计算学习进度，请电脑登录imooc.com操作

手风琴--声明式触发手风琴（二）

第三步，为了把标题和内容区捆绑在一起，可以通过锚链接的方法，把标题区域和面板区连在一起：

<div class="panel-group" id="myAccordion">
    <div class="panel panel-accordion panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a href="#panel1">标题一</a></h4>
        </div>
        <div class="panel-collapse" id="panel1">
            <div class="panel-body">折叠区内容...</div>
        </div>
    </div>
    <div class="panel panel-accordion panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a href="#panel2">标题二</a></h4>
        </div>
        <div class="panel-collapse" id="panel2">
            <div class="panel-body">折叠区内容...</div>
        </div>
    </div>
    ......
</div>


第四步，控制面板内容区是否可视。在Bootstrap框架中，如果你想让内容区域不可视，只需要在 panel-collapse 样式上添加 collapse：

<div class="panel panel-accordion panel-default">
    <div class="panel-heading">
        <h4 class="panel-title"><a href="#panel1">标题一</a></h4>
    </div>
    <div class="panel-collapse collapse" id="panel1">
        <div class="panel-body">折叠区内容...</div>
    </div>
</div>

此时你会看到效果如下图所示：

每个面板的内容区都被隐藏起来了，变成不可视，但有时候希望默认第一个面板内容是可视的，需要怎么办？其实Bootstrap作者早就为大家做了这方面的考虑，你只需要在collapse基础上再追加 in 样式：

<div class="panel panel-accordion panel-default">
    <div class="panel-heading">
        <h4 class="panel-title"><a href="#panel1">标题一</a></h4>
    </div>
    <div class="panel-collapse collapse in" id="panel1">
        <div class="panel-body">折叠区内容...</div>
    </div>
</div>


效果如下：

任务

我来试试：在上一个小节的基础上完成本小节的第三步、第四步。

index.html 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>按钮插件--按钮状态切换</title>
  6. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7. <style>
  8.     body{padding:10px;margin:10px}    
  9. </style>
  10. </head>
  11. <body>
  12. <div class="panel-group" id="accordion">
  13.     <div class="panel panel-default">
  14.         <div class="panel-heading">
  15.             <h4 class="panel-title">标题一</h4>
  16.         </div>
  17.         <div class="panel-collapse">
  18.             <div class="panel-body">标题一对应的内容</div>
  19.         </div>
  20.     </div>
  21.     <div class="panel panel-default">
  22.         <div class="panel-heading">
  23.             <h4 class="panel-title">标题二</h4>
  24.         </div>
  25.         <div class="panel-collapse">
  26.             <div class="panel-body">标题二对应的内容</div>
  27.         </div>
  28.     </div>
  29.     <div class="panel panel-default">
  30.         <div class="panel-heading">
  31.             <h4 class="panel-title">标题三</h4>
  32.         </div>
  33.         <div class="panel-collapse">
  34.             <div class="panel-body">标题三对应的内容</div>
  35.         </div>
  36.     </div>
  37. </div>
  38.   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  39.   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  40.  
  41. </body>
  42. </html>
下一节