第十八谈：折叠菜单

作者: 辽A丶孙悟空 | 来源:发表于2020-06-04 21:09 被阅读0次

第十八谈：折叠菜单
element 导航菜单折叠动画，文字不隐藏
Bootstrap折叠菜单
BootStrap
React Native 折叠菜单
如何使用PyQt、PySide2 创建折叠菜单
layui 笔记
Axure实现2、3菜单展开/折叠效果
来聊聊常用控件的细节吧——折叠菜单（Accordion Menu
大幅菜单的0.5秒

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

一．折叠菜单

使用.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>

使用.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>

使用.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>

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

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