知识点：
.next()：jQuery遍历方法，获取紧邻的下一个兄弟元素，这里就是h4后面的ul二级菜单.slideToggle(毫秒)：滑动展开/收起切换动画- 页面加载时先隐藏全部二级菜单，再单独打开第一个菜单
逻辑：
- 页面加载完成：所有
h4后面的ul二级菜单隐藏；再把第一个菜单展开 - 点击一级菜单标题
h4：找到紧跟的ul，执行滑动展开/收起切换
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm35.aspx.cs" Inherits="WebApplication1.WebForm35" %>
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="[http://libs.baidu.com/jquery/1.8.3/jquery.min.js](http://libs.baidu.com/jquery/1.8.3/jquery.min.js)"></script>
<script>
$(function () {
//隐藏所有h4后面的ul二级菜单
$("h4").next().hide();
//点击一级菜单
$("h4").click(function () {
// $(this).siblings("h4").next().slideUp(); //加上这句可以实现手风琴效果，打开一个自动关闭其他
$(this).next().slideToggle(500);
});
//默认展开第一个菜单
$("h4:first").next().show();
});
</script>
<style>
h4{
cursor:pointer;
background:#eee;
padding:4px;
margin:0;
}
ul{
margin:0;
}
</style>
</head>
<body>
<h4>网站配置</h4>
<ul>
<li>全局配置</li>
<li>邮件配置</li>
<li>皮肤配置</li>
</ul>
<h4>新闻管理</h4>
<ul>
<li>新闻管理</li>
<li>新闻添加</li>
<li>新闻配置</li>
</ul>
<h4>附件管理</h4>
<ul>
<li>日志管理</li>
<li>缓存管理</li>
<li>文件管理</li>
</ul>
<h4>会员管理</h4>
<ul>
<li>会员新增</li>
<li>会员管理</li>
<li>会员权限</li>
</ul>
</body>
</html>
Code language: HTML, XML (xml)说明：
- 新增简单CSS美化，鼠标悬浮到一级菜单会变成手型
- 注释里一行代码可以升级为手风琴菜单：打开当前菜单时自动关闭其他已经展开的菜单
Previous: JQUERY的动画效果
Next: 网页选项卡效果