>웹 프론트엔드 >JS 튜토리얼 >Bootstrap에서 접을 수 있는 측면 탐색을 구현하는 방법

Bootstrap에서 접을 수 있는 측면 탐색을 구현하는 방법

PHPz
PHPz원래의
2018-03-28 15:11:225113검색

이번에는 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>
                   
  •                                                  
  •                
  •                                 
  •                
  •                                 
  •                
  •                                 
  •                
  •                                 
  •                
  •                                 
  •                
  •                                 
  •                
  •                                 
  •                
  •                                 
  •                
  •                                 
  •                
  •                                 
  •               
                                  

            

              

                分组2                                

                         

              

                   
  •                                 
  •                
  •                                 
  •                
  •                                 
  •                
  •                                 
  •               
                                               

        内容       

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.