<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width:125px; border:1px solid #369; line-height:25px; padding-left:10px; } div.menu{ height:30px; line-height:30px; font-size:14px; text-indent:10px; font-weight:bold; color:#fff; background-color:#369; } </style> <script src="js/jq8.js"></script> <script> $(function(){ //当前页面加载完毕后，隐藏所有子菜单 $('.menu+div').hide(); $('div.menu').toggle(function(){ var id = this.id; $('#'+id+'+div').show(); },function(){ var id = this.id; $('#'+id+'+div').hide(); }); }); </script> </head> <body> <div id="a1" class="menu">管理员管理</div> <div> 添加管理员<br /> 删除管理员<br /> 跟新管理员<br /> 查询管理员<br /> </div> <div id="a2" class="menu">管理员管理</div> <div> 添加管理员<br /> 删除管理员<br /> 跟新管理员<br /> 查询管理员<br /> </div> <div id='a3' class="menu">管理员管理</div> <div> 添加管理员<br /> 删除管理员<br /> 跟新管理员<br /> 查询管理员<br /> </div> <div id='a4' class="menu">管理员管理</div> <div> 添加管理员<br /> 删除管理员<br /> 跟新管理员<br /> 查询管理员<br /> </div> </body> </html>