jquery手风琴折叠菜单 - 好文

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content=
"text/html; charset=gb2312"/> <title>折叠展开的菜单</title> </head> <body> <style
type="text/css"> .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>
<scriptsrc="js/jquery-1.11.3.js"></script> <script type="text/javascript"> $(
document).ready(function(){ $('.bMenuTitle').on('click',function(){ $(this).
children('ul').slideDown(); $(this).siblings().children('ul').slideUp(); }) });
</script> <ul id="menuDiv" class=
"bMenuList"> <li class="bMenuTitle"> <span class="oneLevel" >概要信息</span> <ul
class="oneLevelList" id="sub1"> <li><a href="#">概要信息</a></li> </ul> </li>
<liclass="bMenuTitle"><span class="oneLevel">我的费用</span> <ul class=
"oneLevelList"id="sub2"> <li><a href="#">缴费</a></li> <li><a href="#">缴费记录查询
</a></li> </ul> </li> <li class="bMenuTitle"><span class="oneLevel" >我的档案
</span> <ul class="oneLevelList" id="sub3"> <li><a href="#">仪表信息</a></li>
<li><ahref="#">挂表</a></li> </ul> </li> <li class="bMenuTitle"><span class=
"oneLevel">我的报表</span> <ul class="oneLevelList" id="sub4"> <li><a href="">
收费月报表</a></li> <li><a href="">收费年报表</a></li> </ul> </li> </ul> </body>
</html>

手风琴下拉菜单，默认全部隐藏，展开时仅展开一个，其他的会收缩起来

热门工具换一换