Bootstrap手风琴菜单

逃离我推掉我的手 2022-06-14 00:52 368阅读 0赞

手风琴菜单似乎已经成了网站后台的标配了，怎么写一个手风琴式的菜单呢？如果你利用原生js去写可能会比较麻烦，但利用Bootstrap框架的`Collapse.js`插件就变得简单啦。  
你可以直接用[官网的demo][demo]:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Collapsible Group Item #1
            </a>
          </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <div class="panel-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
          <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Collapsible Group Item #2
            </a>
          </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
          <div class="panel-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingThree">
          <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Collapsible Group Item #3
            </a>
          </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
          <div class="panel-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
        </div>
      </div>
    </div>

效果：  
![这里写图片描述][SouthEast]  
通过学习这个demo我们就可以来写自己的手风琴式菜单了。  
首先要明白这几个参数：

*  `data-toggle="collapse"` 一定要添加到想要展开或折叠的组件的链接上。
 *  `href`或 `data-target` 属性添加到父组件，它的值是子组件的 id。
 *  `.collapse` 隐藏内容。
 *  `.collapse.in`显示内容。

还可以添加一个按钮控制菜单的显示可隐藏，可以利用jquery的`toggle()`方法。  
代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/bootstrap.css">
        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <title>Title</title>
        <style> html,body{ width: 100%; height: 100%; margin: 0; padding: 0; } .header{ width: 100%; height: 40px; background: #2e6da4; line-height: 40px; } .menu { position: absolute; top: 40px; bottom: 0; width: 200px; background: #1b6d85; } .btn-full{ width: 100%; border-radius: 0; } #downBtn{ display: none; } </style>
    </head>
    <body>
    <div class="header">
        <button id="closeBtn" class="btn btn-danger"><span class="glyphicon glyphicon-menu-up"></span><sapn id="downBtn" class="glyphicon glyphicon-menu-down"></sapn></button>
    </div>
        <div class="menu">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <a class="btn btn-primary btn-full" role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                    搜索引擎
                </a>
                <div id="collapseOne" class="panel-collapse collapse">
                    <div class="list-group">
                        <a href="#" class="list-group-item">谷歌</a>
                        <a href="#" class="list-group-item">百度</a>
                        <a href="#" class="list-group-item">搜狗</a>
                        <a href="#" class="list-group-item">神马</a>
                        <a href="#" class="list-group-item">必应</a>
                    </div>
                </div>
    
                <a class="btn btn-primary btn-full" role="button" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    其它网页
                </a>
                <div id="collapseTwo" class="panel-collapse collapse">
                    <div class="list-group">
                        <a href="#" class="list-group-item">谷歌</a>
                        <a href="#" class="list-group-item">百度</a>
                        <a href="#" class="list-group-item">搜狗</a>
                        <a href="#" class="list-group-item">神马</a>
                        <a href="#" class="list-group-item">必应</a>
                    </div>
                </div>
    
            </div>
    
        </div>
    
        <script> $("#closeBtn").click(function () { $(".menu").toggle(500,function () { $(".glyphicon-menu-down").toggle(); $(".glyphicon-menu-up").toggle(); }); }); </script>
    </body>
    </html>

最终效果：  
![这里写图片描述][SouthEast 1]

[demo]: http://getbootstrap.com/javascript/#collapse
[SouthEast]: /images/20220614/e9ef3f2f071d49fd8054a34210bf05fe.png
[SouthEast 1]: /images/20220614/06b9a23ab3e24543a4ffb6fb028cd086.png