Bootstrap之側邊導航菜單(可摺疊分組)
點擊右側的箭頭，該選項卡會展開或收起。css
效果圖：html
<!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標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
<title>表格</title>
<meta name="keywords" content="側邊導航菜單(可分組摺疊)">
<meta name="description" content="側邊導航菜單(可分組摺疊)" />
<meta name="HandheldFriendly" content="True" />
<link rel="shortcut icon" href="img/favicon.ico">
<!-- Bootstrap3.3.5 CSS -->
<link href="http://v3.bootstrap.cn/assets/css/bootstrap.min.css" rel="stylesheet">
<!-- 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>
</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>
</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">
內容
</div>
</div>
<!-- jQuery1.11.3 (necessary for Bo otstrap's JavaScript plugins) -->
<script src="http://v3.bootstrap.cn/assets/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://v3.bootstrap.cn/assets/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>
本文轉自：http://blog.csdn.net/shangmingchao/article/details/49763351html5
相關文章
- 1. CSS之可摺疊導航
- 2. bootstrap實現摺疊菜單
- 3. 利用ExpandableListView和gridview 顯示可展開摺疊菜單導航
- 4. js實現側邊導航欄展開和摺疊
- 5. 側劃導航菜單
- 6. bootstrap側邊導航欄的實現
- 7. element ui aside — 側欄導航菜單移入移出摺疊效果
- 8. Bootstrap-菜單，導航，按鈕
- 9. 側邊欄導航
- 10. 利用JQuery實現左側菜單欄可摺疊功能
- 更多相關文章...
- • ionic 側欄菜單 - ionic 教程
- • jQuery Mobile 可摺疊塊 - jQuery Mobile 教程
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • Git可視化極簡易教程 — Git GUI使用方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
