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 중국어 웹사이트의 기타 관련 기사를 참조하세요!