이번에는 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>
内容
<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 중국어 기타 온라인 관련 기사를 주목해 주세요!
추천 도서:
node.js 프로젝트의 pm2 배포에 대한 자세한 튜토리얼
위 내용은 Bootstrap에서 접을 수 있는 측면 탐색을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!