<!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>
效果图：