第十八谈：折叠菜单

本节课我们来开始学习 Bootstrap 的提供的折叠菜单组件。

一．折叠菜单

1. 使用.collapse 构建一个最简单的折叠菜单的效果；

      <div>
          <button class="btn btn-success" data-toggle="collapse" href="#collapseText">按钮</button>
      </div>
      <div class="collapse border border-success" id="collapseText">
          <p>这里是一段要被切换的文本</p>
      </div>
      <div>占位文本</div>

2. 使用.multi-collapse 实现一个按钮控制多个折叠菜单的功能；

      <div>
          <button class="btn btn-success" data-toggle="collapse" href="#collapseText1">按钮 1</button>
          <button class="btn btn-success" data-toggle="collapse" href="#collapseText2">按钮 2</button>
          <button class="btn btn-success" data-toggle="collapse" href=".multi-collapse">按钮 3</button>
      </div>
      <div class="collapse multi-collapse border border-success" id="collapseText1">
          <p>这里是一段要被切换的文本 1</p>
      </div>
      <div class="collapse multi-collapse border border-success" id="collapseText2">
          <p>这里是一段要被切换的文本 2</p>
      </div>

3. 使用.accordion 结合.card 卡片实现手风琴效果；

      <div class="accordion w-50" id="accordion">
          <div class="card">
              <button class="btn btn-link" data-toggle="collapse" data-target="#collapseText1">按钮 1</button>
              <div class="collapse show border border-bottom-0 border-left-0 border-right-0" id="collapseText1" data-parent="#accordion">
                  <p>这里是一段要被切换的文本 1</p>
              </div>
          </div>
          <div class="card">
              <button class="btn btn-link" data-toggle="collapse" data-target="#collapseText2">按钮 2</button>
              <div class="collapse border border-bottom-0 border-left-0 border-right-0" id="collapseText2" data-parent="#accordion">
                  <p>这里是一段要被切换的文本 2</p>
              </div>
          </div>
          <div class="card">
              <button class="btn btn-link" data-toggle="collapse" data-target="#collapseText3">按钮 3</button>
              <div class="collapse border border-bottom-0 border-left-0 border-right-0" id="collapseText3" data-parent="#accordion">
                  <p>这里是一段要被切换的文本 3</p>
              </div>
          </div>
      </div>

4. 通过 JS 控制，来设置按钮触发的效果，具体如下；

      <script>
          $('.btn').click(function() {
              //按钮点击后显示
              $('.collapse').collapse('show');
              //按钮点击后隐藏
              $('.collapse').collapse('hide');
              //按钮点击后切换
              $('.collapse').collapse('toggle');
              //按钮点击后销毁
              $('.collapse').collapse('dispose');
          });
      </script>