jQuery - 制作点击显示二级菜单效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>制作子菜单</title>
    <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function(){

            $("h2").click(function(){
                $(this).next("ul").css("display","block").addClass("nav");
                $($("li")[0]).css("background-color","#ccc");
            });
        })
    </script>
    <style type="text/css">
        .nav li{
            font-size:14px;
            font-weight:bold;
            line-height: 24px;
        }
    </style>
</head>
<body>
<h2>新手指南</h2>
<ul style='display:none'>
    <li><a href="#">会员注册</a></li>
    <li><a href="#">订阅更新</a></li>
    <li><a href="#">用户协议</a></li>
    <li><a href="#">常见问题</a></li>
</ul>

</body>
</html>
制作点击显示二级菜单效果.html