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 中国語その他のオンライン関連記事に注意してください。

推奨読書:

layuiテーブルを操作するにはチェックボックスを使用してください

node.jsプロジェクトのpm2デプロイメントに関する詳細なチュートリアル

以上がBootstrap で折りたたみ可能なサイド ナビゲーションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。