Bootstrap實現(xiàn)可折疊分組側(cè)邊導航菜單
更新時間：2018年03月07日 15:43:51 作者：shangmingchao
這篇文章主要介紹了Bootstrap實現(xiàn)可折疊分組側(cè)邊導航菜單的相關(guān)資料,需要的朋友可以參考下
效果圖：
源碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
<title>表格</title>
<meta name="keywords" content="側(cè)邊導航菜單(可分組折疊)">
<meta name="description" content="側(cè)邊導航菜單(可分組折疊)" />
<meta name="HandheldFriendly" content="True" />
<link rel="shortcut icon" href="img/favicon.ico" rel="external nofollow" >
<!-- Bootstrap3.3.5 CSS -->
<link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://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;}/*轉(zhuǎn)成手形圖標*/
.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>
</head>
<body>
<div class="row">
<div class="col-md-2">
<div class="panel-group table-responsive" 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">
分組1
<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">
<!-- 利用data-target指定URL -->
<button class="menu-item-left" data-target="test2.html">
<span class="glyphicon glyphicon-triangle-right"></span>分組項1-1
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分組項1-2
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分組項1-3
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分組項1-4
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分組項1-5
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分組項1-6
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分組項1-7
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分組項1-8
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分組項1-9
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分組項1-10
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分組項1-11
</button>
</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">
分組2
<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">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分組項2-1
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分組項2-2
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分組項2-3
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分組項2-4
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-10">
內(nèi)容
</div>
</div>
<!-- jQuery1.11.3 (necessary for Bo otstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js "></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js "></script>
<script>
$(function(){
$(".panel-heading").click(function(e){
/*切換折疊指示圖標*/
$(this).find("span").toggleClass("glyphicon-chevron-down");
$(this).find("span").toggleClass("glyphicon-chevron-up");
});
});
</script>
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的Bootstrap實現(xiàn)可折疊分組側(cè)邊導航菜單，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
下面小編就為大家?guī)硪黄狫S獲取IMG圖片高寬的簡單實例。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
詰屈聱牙之javascript中國象棋...2007-04-04
這篇文章主要介紹了Javascript操作表單實例講解（下）的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單圓盤時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
類似QQ新聞的提示框要求頁面每隔半小時彈出一次提示消息，下面有個不錯的實現(xiàn)方法，感興趣的朋友可以參考下2013-11-11
js中將URL中的參數(shù)提取出來作為對象的實現(xiàn)代碼
將URL中的參數(shù)提取出來作為對象的實現(xiàn)代碼，適合希望獲取url參數(shù)的朋友。2011-08-08
uniapp獲取當前位置及檢測授權(quán)狀態(tài)效果
這篇文章主要介紹了uniapp獲取當前位置及檢測授權(quán)狀態(tài)效果,本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-04-04
Three.js實現(xiàn)3D乒乓球小游戲(物理效果)
本文將使用React Three Fiber 和 Cannon.js 來實現(xiàn)一個具有物理特性的乒乓球小游戲，使用 React Three Fiber 搭建基礎(chǔ)三維場景、如何使用新技術(shù)棧給場景中對象的添加物理特性等，最后利用上述知識點，將開發(fā)一個簡單的乒乓球小游戲,需要的朋友可以參考下2023-03-03
JavaScript學習筆記之基于定時器實現(xiàn)圖片無縫滾動功能詳解
這篇文章主要介紹了JavaScript學習筆記之基于定時器實現(xiàn)圖片無縫滾動功能,結(jié)合實例形式分析了javascript定時器與頁面元素屬性動態(tài)設(shè)置等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
微信小程序開發(fā)實現(xiàn)的IP地址查詢功能示例
這篇文章主要介紹了微信小程序開發(fā)實現(xiàn)的IP地址查詢功能,可實現(xiàn)基于第三方接口的IP地址查詢功能,需要的朋友可以參考下2019-03-03