<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>折叠展开的菜单</title>
<style type="text/css">
ul {
list-style-type: none; /* 去掉每个 ul 和 li 前面的圆点 */
}
.oneLevel {
display: inline-block;
width: 200px;
line-height: 32px;
border-bottom: 1px solid #ccc;
background: #9d9d9d;
cursor: pointer;
}
.oneLevel > span {
margin-left: 10px;
}
.oneLevelList {
display: none;
}
</style>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// 处于打开状态菜单的 id
var openMenuId = "";
$(document).ready(function(){
$('.bMenuTitle').on('click', function(){
var idThis = $(this).attr( "id" );
if(openMenuId !== idThis){
$(this).siblings().children('ul').slideUp();
$(this).children('ul').slideDown();
openMenuId = idThis;
}else{
$(this).children('ul').slideUp();
openMenuId = "";
}
//$('#flag').html(openMenuId);
});
});
</script>
</head>
<body>
<!-- Keep all menus within menuDiv -->
<ul id="menuDiv" class="bMenuList">
<li class="bMenuTitle" id="menu1">
<span class="oneLevel" >概要信息</span>
<ul class="oneLevelList" id="sub1">
<li><a href="#">概要信息</a></li>
</ul>
</li>
<li class="bMenuTitle" id="menu2">
<span class="oneLevel">我的费用</span>
<ul class="oneLevelList" id="sub2">
<li><a href="#">缴费</a></li>
<li><a href="#">缴费记录查询</a></li>
</ul>
</li>
<li class="bMenuTitle" id="menu3">
<span class="oneLevel" >我的档案</span>
<ul class="oneLevelList" id="sub3">
<li><a href="#">仪表信息</a></li>
<li><a href="#">挂表</a></li>
</ul>
</li>
</ul>
<div id="flag"></div>
</body>
</html>转载一个 jquery 折叠展开的菜单。在原有基础上增加了菜单折叠效果。
效果：
