Jquery实例2：可收缩展开的级联菜单与局部刷新

时间：2010-07-17 来源：mr-cheney

1.html部分：

JqueryMenu.html源代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
        <head>
                <title>Jquery实例2:弹出菜单</title>
                <meta http-equiv="content-type" content="text/html; charset=UTF-8">
                <link href="css/menu.css" rel="stylesheet" type="text/css" />
                <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
                <script type="text/javascript" src="js/menu.js"></script>
        </head>

        <body>
                <ul>
                        <a href="#">诗歌</a>
                        <li><a href="#" id="a.html">乡愁(余光中)</a></li>
                        <li><a href="#" id="b.html">赋得古原草送别(白居易)</a></li>
                </ul>
                <ul>
                        <a href="#">技术</a>
                        <li><a href="#">Flex/AIR</a></li>
                        <li><a href="#">Silverlight</a></li>                    
                </ul>
                <ul>
                        <a href="#">体育</a>
                        <li><a href="#" id="a.html">足球(欧洲风云)</a></li>
                        <li><a href="#" id="b.html">篮球(NBA战火)</a></li>
                </ul>
                <div id="content"></div>
        </body>
</html>

2.css代码

menu.js源代码：

/*让所有li的小圆点都不显示，可以使用css的标签选择器*/
li {
        /*让li前面的小圆点消失*/
        list-style: none;
        /*让子菜单向右移动一段距离，达到缩进的效果*/
        margin-left: 15px;
        /*让所有的子菜单都不显示*/
        display: none;
}

a {
        /*让链接的下划线消失*/
        text-decoration: none;
}

3.JavaScript代码：

menu.js源代码：

//需要点击主菜单的按钮时，对应的子菜单可以显示，再次点击子菜单则隐藏

//需要编写代码时，在页面加载时，让所有的主菜单添加onclick事件
//保证主菜单点击时可以显示或者隐藏子菜单

//注册页面装载时执行的方法
$(document).ready(function() {
        //这里首先需要找到所有的主菜单
        //然后给所有的主菜单注册点击事件
        
        var as = $("ul > a");
        as.click(function() {
                //这里需要找到当前的ul中的li,然后让li显示出来
                //获取当前被点击的ul节点
                var ulNode = $(this);
                //找到当前a节点的所有li兄弟子结点
                var lis = ulNode.nextAll("li");
                //让子菜单显示或隐藏
                lis.toggle("slow");
                //局部刷新
                $("li > a").click(function() {
                        $("#content").load($(this).attr("id"));
                });
        });
});

ok,代码已经贴完，现在我们看一看效果图吧。