bootstrap側邊伸縮選單
阿新 • • 發佈:2018-12-14
<div class="panel-group table-responsive classify" role="tablist"> <div class="panel panel-primary leftMenu"> <!-- 利用data-target指定要摺疊的分組列表 --> <div class="panel-heading" id="collapseListGroupHeading1" data-toggle="collapse" data-target="#collapseListGroup1" role="tab"> <h4 class="panel-title"> 技術類 <span class="glyphicon glyphicon-chevron-up right"></span> </h4> </div> <!-- .panel-collapse和.collapse標明摺疊元素 .in表示要顯示出來 --> <div id="collapseListGroup1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="collapseListGroupHeading1"> <ul class="list-group"> <li class="list-group-item"> <a href="#">HTML5</a> </li> <li class="list-group-item"> <a href="">CSS</a> </li> <li class="list-group-item"> <a href="">JavaScript</a> </li> <li class="list-group-item"> <a href="">Vue.js</a> </li> <li class="list-group-item"> <a href="">Django</a> </li> <li class="list-group-item"> <a href="">MySql</a> </li> <li class="list-group-item"> <a href="">Python</a> </li> <li class="list-group-item"> <a href="">Java</a> </li> </ul> </div> </div><!--panel end--> <div class="panel panel-primary leftMenu"> <div class="panel-heading" id="collapseListGroupHeading2" data-toggle="collapse" data-target="#collapseListGroup2" role="tab"> <h4 class="panel-title"> 其他類 <span class="glyphicon glyphicon-chevron-down right"></span> </h4> </div> <div id="collapseListGroup2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading2"> <ul class="list-group"> <li class="list-group-item"> <a href="">感悟</a> </li> <li class="list-group-item"> <a href="">遊記</a> </li> <li class="list-group-item"> <a href="">日記</a> </li> </ul> </div> </div> </div>
要記得配上jquery
$(function () { $(".panel-heading").click(function (e) { /*切換摺疊指示圖示*/ $(this).find("span").toggleClass("glyphicon-chevron-down"); $(this).find("span").toggleClass("glyphicon-chevron-up"); }); });