<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>jquery实现菜单功能（单击展开或者关闭）-一般应用于后台</title>
<script src="js/jquery-1.11.1.min.js"></script>
<style>
.bor{border:10px solid yellow;}
.red{color:red;}
</style>
<script>
$(document).ready(function(e) {
//class=menu的h1的下一个元素：无类型
$('h1.menu').next().css('display','none');
//为class=menu的h1加入单击事件：显示时单击隐藏，隐藏时单击显示
$('h1.menu').click(function(){
//$(this).next().show();
//有此行菜单你同意打开一个
$('h1').next().css('display','none');
//$(this).next().is(":hidden") ? $(this).next().show() : $(this).next().hide();
var o = $(this).next();
o.is(':hidden') ? o.show() : o.hide();
});
$('#ddd').add('<b>ok</b>');
});
</script>
</head>
<body>
<div id="ddd">aaaa</div>
<hr>
<h1 class='menu'>菜单一</h1>
<ul>
<li>1111111111</li>
<li>2222222222</li>
<li>3333333333</li>
<li>4444444444</li>
</ul>
<h1 class='menu'>菜单二</h1>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
<h1 class='menu'>菜单三</h1>
<ul>
<li>31111111111</li>
<li>32222222222</li>
<li>33333333333</li>
<li>34444444444</li>
</ul>
<h1 class='menu'>菜单四</h1>
<ul>
<li>441111111111</li>
<li>442222222222</li>
<li>443333333333</li>
<li>444444444444</li>
</ul>
</body>
</html>
效果图：