How to implement collapsible side navigation in Bootstrap

This time I will show you how to implement collapsible side navigation in Bootstrap. What are the precautions for implementing collapsible side navigation in Bootstrap? Here is a practical case, let’s take a look.

【Related video recommendation: Bootstrap tutorial】

Rendering:

Source code:

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>   

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Use checkbox to operate layui tables

##Detailed tutorial on pm2 deploying node.js project

The above is the detailed content of How to implement collapsible side navigation in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!