Bootstrap怎麼實現可折疊的側邊導航

這次帶給大家Bootstrap怎麼實現可折疊的側邊導航，Bootstrap實現可折疊側邊導航的注意事項有哪些，以下就是實戰案例，一起來看一下。

【相關影片推薦：Bootstrap教學】

效果圖：

##原始碼：

nbsp;html>

  
    <meta>
    <meta>
    <meta>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>表格</title>
    <meta>
    <meta>
    <meta>
    <link>
    <!-- Bootstrap3.3.5 CSS -->
    <link>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      .panel-group{max-height:770px;overflow: auto;}
      .leftMenu{margin:10px;margin-top:5px;}
      .leftMenu .panel-heading{font-size:14px;padding-left:20px;height:36px;line-height:36px;color:white;position:relative;cursor:pointer;}/*转成手形图标*/
      .leftMenu .panel-heading span{position:absolute;right:10px;top:12px;}
      .leftMenu .menu-item-left{padding: 2px; background: transparent; border:1px solid transparent;border-radius: 6px;}
      .leftMenu .menu-item-left:hover{background:#C4E3F3;border:1px solid #1E90FF;}
    </style>
  
  
    <p>
      </p><p>
        </p><p>
          </p><p>
            <!-- 利用data-target指定要折叠的分组列表 -->
            </p><p>
              </p><h4>
                分组1
                <span></span>
              </h4>
            
            <!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->
            <p>
              </p>

               
•                                                     分组项1-1                                 
               
•                                    分组项1-2                                 
               
•                                    分组项1-3                                 
               
•                                    分组项1-4                                 
               
•                                    分组项1-5                                 
               
•                                    分组项1-6                                 
               
•                                    分组项1-7                                 
               
•                                    分组项1-8                                 
               
•                                    分组项1-9                                 
               
•                                    分组项1-10                                 
               
•                                    分组项1-11                                 
              

                                  

            

              

                分组2                                

                         

              

               
•                                    分组项2-1                                 
               
•                                    分组项2-2                                 
               
•                                    分组项2-3                                 
               
•                                    分组项2-4                                 
              

                                               

        内容       

              <script></script>          <script></script>     <script> $(function(){ $(".panel-heading").click(function(e){ /*切换折叠指示图标*/ $(this).find("span").toggleClass("glyphicon-chevron-down"); $(this).find("span").toggleClass("glyphicon-chevron-up"); }); }); </script>    相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

用checkbox操作layui表格

#pm2部署node.js專案詳細教學

以上是Bootstrap怎麼實現可折疊的側邊導航的詳細內容。更多資訊請關注PHP中文網其他相關文章！