使用jquery构造自己的多级菜单

　　最近在讲AJAX方面的一些理论和在项目中的应用。我介绍到了AJAX的一些内部原理，以及两套AJAX框架：Microsoft ASP.NET AJAX和jquery。我个人很喜欢Jquery，我对它的赞美从不吝啬。

　　关于Jquery，其实之前就写过不少，有兴趣的可以参考：http://zzk.cnblogs.com/s?w=blog%3Achenxizhang%20jquery

　　课程中讲到一个问题，就是如何动态生成多级菜单。我知道网上有不少类似的菜单。但既然咱学了Jquery，为什么不可以尝试自己实践一下呢？我把例子整理如下，希望给大家一些启发和帮助。

　　我们希望的结果简单如下：左侧会根据数据库结构展示一个菜单，默认只是显示第一级。用户可以根据需要点击任何一级，可以显示子级。而且同级会被隐藏。最后一层是链接，点击之后，在右侧显示有关的页面内容。

　　第一步：准备菜单数据页面

　　我们可以用一个页面，动态生成这个菜单的数据。本例我取名为menu.aspx：

   
   
   
   

    
    
    
    
    <%
    
    
    
    @ Page Language
    
    
    
    =
    
    
    
    "
    
    
    
    C#
    
    
    
    "
    
    
    
     ContentType
    
    
    
    =
    
    
    
    "
    
    
    
    text/xml
    
    
    
    "
    
    
    
    %>
    
    
    
    

    
    
    
    <%
    
    
    
    @ Import Namespace
    
    
    
    =
    
    
    
    "
    
    
    
    System.Xml.Linq
    
    
    
    "
    
    
    
     
    
    
    
    %>
    
    
    
    

    
    
    
    <%
    
    
    
    @ Import Namespace
    
    
    
    =
    
    
    
    "
    
    
    
    System.Linq
    
    
    
    "
    
    
    
     
    
    
    
    %>
    
    
    
    


    
    
    
    <
    
    
    
    script 
    
    
    
    runat
    
    
    
    ="server"
    
    
    
    >
    
    
    
    
    protected override 
    
    
    
    void
    
    
    
     OnLoad(EventArgs e)
    {
        
    
    
    
    //
    
    
    
    动态构造一个菜单（随机生成五层）
    
    
    
    

    
    
    
            
    
    
    
    var
    
    
    
     rnd 
    
    
    
    =
    
    
    
     
    
    
    
    new
    
    
    
     Random();

        
    
    
    
    var
    
    
    
     menu 
    
    
    
    =
    
    
    
     
    
    
    
    new
    
    
    
     XElement(
    
    
    
    "
    
    
    
    MenuItems
    
    
    
    "
    
    
    
    ,
            from level1 
    
    
    
    in
    
    
    
     Enumerable.Range(
    
    
    
    1
    
    
    
    , 
    
    
    
    10
    
    
    
    )
            select 
    
    
    
    new
    
    
    
     XElement(
    
    
    
    "
    
    
    
    div
    
    
    
    "
    
    
    
    , 
    
    
    
    "
    
    
    
    第
    
    
    
    "
    
    
    
     
    
    
    
    +
    
    
    
     level1.ToString() 
    
    
    
    +
    
    
    
     
    
    
    
    "
    
    
    
    章
    
    
    
    "
    
    
    
    ,
                from level2 
    
    
    
    in
    
    
    
     Enumerable.Range(
    
    
    
    1
    
    
    
    , rnd.Next(
    
    
    
    10
    
    
    
    ))
                select 
    
    
    
    new
    
    
    
     XElement(
    
    
    
    "
    
    
    
    div
    
    
    
    "
    
    
    
    , 
    
    
    
    "
    
    
    
    第
    
    
    
    "
    
    
    
     
    
    
    
    +
    
    
    
     level2.ToString() 
    
    
    
    +
    
    
    
     
    
    
    
    "
    
    
    
    节
    
    
    
    "
    
    
    
    ,
                    from level3 
    
    
    
    in
    
    
    
     Enumerable.Range(
    
    
    
    1
    
    
    
    , rnd.Next(
    
    
    
    5
    
    
    
    ))
                    select 
    
    
    
    new
    
    
    
     XElement(
    
    
    
    "
    
    
    
    div
    
    
    
    "
    
    
    
    , 
    
    
    
    "
    
    
    
    第
    
    
    
    "
    
    
    
     
    
    
    
    +
    
    
    
     level3.ToString() 
    
    
    
    +
    
    
    
     
    
    
    
    "
    
    
    
    小节
    
    
    
    "
    
    
    
    ,
                        from level4 
    
    
    
    in
    
    
    
     Enumerable.Range(
    
    
    
    1
    
    
    
    , rnd.Next(
    
    
    
    5
    
    
    
    ))
                        select 
    
    
    
    new
    
    
    
     XElement(
    
    
    
    "
    
    
    
    div
    
    
    
    "
    
    
    
    , 
    
    
    
    "
    
    
    
    第
    
    
    
    "
    
    
    
     
    
    
    
    +
    
    
    
     level4.ToString() 
    
    
    
    +
    
    
    
     
    
    
    
    "
    
    
    
    小小节
    
    
    
    "
    
    
    
    ,
                            
    
    
    
    new
    
    
    
     XElement(
    
    
    
    "
    
    
    
    ul
    
    
    
    "
    
    
    
    ,
                            from level5 
    
    
    
    in
    
    
    
     Enumerable.Range(
    
    
    
    1
    
    
    
    , rnd.Next(
    
    
    
    10
    
    
    
    ))
                            select 
    
    
    
    new
    
    
    
     XElement(
    
    
    
    "
    
    
    
    li
    
    
    
    "
    
    
    
    ,
                                
    
    
    
    new
    
    
    
     XElement(
    
    
    
    "
    
    
    
    a
    
    
    
    "
    
    
    
    ,
                                
    
    
    
    new
    
    
    
     XAttribute(
    
    
    
    "
    
    
    
    href
    
    
    
    "
    
    
    
    , 
    
    
    
    "
    
    
    
    a.aspx
    
    
    
    "
    
    
    
    ),
                                
    
    
    
    new
    
    
    
     XAttribute(
    
    
    
    "
    
    
    
    target
    
    
    
    "
    
    
    
    , 
    
    
    
    "
    
    
    
    content
    
    
    
    "
    
    
    
    ),
                                
    
    
    
    new
    
    
    
     XText(
    
    
    
    "
    
    
    
    第
    
    
    
    "
    
    
    
     
    
    
    
    +
    
    
    
     level5.ToString() 
    
    
    
    +
    
    
    
     
    
    
    
    "
    
    
    
    个链接
    
    
    
    "
    
    
    
    )))))))));         
           
        Response.Write(menu.ToString());                    
    }

    
    
    
    
    
    
    
    script
    
    
    
    >
   
   
   
   

　　【注意】我这里只是为了演示目的，随机生成了五层，每层的元素也是随机生成的。真正在用的时候，可以读取数据库。

　　这个页面，在浏览器中看起来是这样：

　　【注意】因为我用的是随机数，所以你看到的结果可能跟这个不一样。

　　第二步：准备一个测试用的链接页面

　　本例中，我们需要一个a.aspx页面。我只是简单地在这个页面中放了一些文字：

　　第三步：编写主页面

   
   
   
   

    
    
    
    
    <%
    
    
    
    @ Page Language
    
    
    
    =
    
    
    
    "
    
    
    
    C#
    
    
    
    "
    
    
    
     AutoEventWireup
    
    
    
    =
    
    
    
    "
    
    
    
    true
    
    
    
    "
    
    
    
     CodeBehind
    
    
    
    =
    
    
    
    "
    
    
    
    Default.aspx.cs
    
    
    
    "
    
    
    
     Inherits
    
    
    
    =
    
    
    
    "
    
    
    
    WebApplication1._Default
    
    
    
    "
    
    
    
     
    
    
    
    %>
    
    
    
    


    
    
    
    
    
    
    
    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    
    
    
    >
    
    
    
    

    
    
    
    <
    
    
    
    html 
    
    
    
    xmlns
    
    
    
    ="http://www.w3.org/1999/xhtml"
    
    
    
    >
    
    
    
    

    
    
    
    <
    
    
    
    head 
    
    
    
    runat
    
    
    
    ="server"
    
    
    
    >
    
    
    
    
    
    
    
    
    <
    
    
    
    title
    
    
    
    >
    
    
    
    title
    
    
    
    >
    
    
    
    
    
    
    
    
    <
    
    
    
    script 
    
    
    
    src
    
    
    
    ="jquery-1.4.1.js"
    
    
    
     type
    
    
    
    ="text/javascript"
    
    
    
    >
    
    
    
    script
    
    
    
    >
    
    
    
    
    
    
    
    
    <
    
    
    
    style 
    
    
    
    type
    
    
    
    ="text/css"
    
    
    
    >
    
    
    
    
        .selected
        
    
    
    
    {
    
    
    
    
            font-weight
    
    
    
    :
    
    
    
    bold
    
    
    
    ;
    
    
    
    
        
    
    
    
    }
    
    
    
    
        div#menu div
        
    
    
    
    {
    
    
    
    
            padding-left
    
    
    
    :
    
    
    
     20px
    
    
    
    ;
    
    
    
    
            background-image
    
    
    
    :
    
    
    
     url("images/min.gif")
    
    
    
    ;
    
    
    
    
            background-repeat
    
    
    
    :
    
    
    
     no-repeat
    
    
    
    ;
    
    
    
    
            background-position
    
    
    
    :
    
    
    
     left top
    
    
    
    ;
    
    
    
    
        
    
    
    
    }
    
    
    
    
        
        ul
        
    
    
    
    {
    
    
    
    
            padding-left
    
    
    
    :
    
    
    
    20px
    
    
    
    ;
    
    
    
    
            padding-top
    
    
    
    :
    
    
    
    0px
    
    
    
    ;
    
    
    
    
            padding-bottom
    
    
    
    :
    
    
    
    0px
    
    
    
    ;
    
    
    
    
            margin
    
    
    
    :
    
    
    
    0px
    
    
    
    ;
    
    
    
    
            display
    
    
    
    :
    
    
    
    none
        
    
    
    
    }
    
    
    
    
        
        html,body,form
        
    
    
    
    {
    
    
    
    
            height
    
    
    
    :
    
    
    
    100%
    
    
    
    ;
    
    
    
    
            width
    
    
    
    :
    
    
    
    100%
    
    
    
    ;
    
    
    
    
            overflow
    
    
    
    :
    
    
    
    hidden
    
    
    
    ;
    
    
    
    
        
    
    
    
    }
    
    
    
    
        
        div#menu,div#content
        
    
    
    
    {
    
    
    
    
            float
    
    
    
    :
    
    
    
    left
    
    
    
    ;
    
    
    
    
            height
    
    
    
    :
    
    
    
    100%
    
    
    
    ;
    
    
    
    
            padding
    
    
    
    :
    
    
    
    10px
        
    
    
    
    }
    
    
    
            
    
    
    
    
    
    
    
    
    style
    
    
    
    >
    
    
    
    
    
    
    
    
    <
    
    
    
    script 
    
    
    
    language
    
    
    
    ="javascript"
    
    
    
     type
    
    
    
    ="text/javascript"
    
    
    
    >
    
    
    
    
        $(
    
    
    
    function
    
    
    
     () {
            
    
    
    
    //
    
    
    
    加载菜单数据
    
    
    
    

    
    
    
                $(
    
    
    
    "
    
    
    
    div#menu
    
    
    
    "
    
    
    
    ).load(
    
    
    
    "
    
    
    
    menu.aspx
    
    
    
    "
    
    
    
    , 
    
    
    
    null
    
    
    
    , 
    
    
    
    function
    
    
    
     () {
                $(
    
    
    
    "
    
    
    
    div#menu div
    
    
    
    "
    
    
    
    ).css(
    
    
    
    "
    
    
    
    display
    
    
    
    "
    
    
    
    , 
    
    
    
    "
    
    
    
    none
    
    
    
    "
    
    
    
    ).click(
    
    
    
    function
    
    
    
     () {

                    $(
    
    
    
    "
    
    
    
    div#menu div
    
    
    
    "
    
    
    
    ).removeClass(
    
    
    
    "
    
    
    
    selected
    
    
    
    "
    
    
    
    );

                    $(
    
    
    
    this
    
    
    
    ).addClass(
    
    
    
    "
    
    
    
    selected
    
    
    
    "
    
    
    
    )
                        .children().show(
    
    
    
    "
    
    
    
    slow
    
    
    
    "
    
    
    
    ).end()
                        .siblings().children().slideUp(
    
    
    
    "
    
    
    
    slow
    
    
    
    "
    
    
    
    );
                });

                $(
    
    
    
    "
    
    
    
    div#menu>MenuItems>div
    
    
    
    "
    
    
    
    ).css(
    
    
    
    "
    
    
    
    display
    
    
    
    "
    
    
    
    , 
    
    
    
    "
    
    
    
    block
    
    
    
    "
    
    
    
    );
            });
        });
    
    
    
    
    
    
    
    
    script
    
    
    
    >
    
    
    
    

    
    
    
    
    
    
    
    head
    
    
    
    >
    
    
    
    

    
    
    
    <
    
    
    
    body
    
    
    
    >
    
    
    
    
    
    
    
    
    <
    
    
    
    form 
    
    
    
    id
    
    
    
    ="form1"
    
    
    
     runat
    
    
    
    ="server"
    
    
    
    >
    
    
    
    
    
    
    
    
    <
    
    
    
    div 
    
    
    
    id
    
    
    
    ="menu"
    
    
    
     style
    
    
    
    ="width:25%"
    
    
    
    >
    
    
    
    

    
    
    
    
    
    
    
    
    div
    
    
    
    >
    
    
    
    
    
    
    
    
    <
    
    
    
    div 
    
    
    
    id
    
    
    
    ="content"
    
    
    
     style
    
    
    
    ="width:70%"
    
    
    
    >
    
    
    
    
        
    
    
    
    <
    
    
    
    iframe 
    
    
    
    name
    
    
    
    ="content"
    
    
    
     width
    
    
    
    ="100%"
    
    
    
     height
    
    
    
    ="100%"
    
    
    
     frameborder
    
    
    
    ="0"
    
    
    
    >
    
    
    
    iframe
    
    
    
    >
    
    
    
    
    
    
    
    
    
    
    
    
    div
    
    
    
    >
    
    
    
    
    
    
    
    
    
    
    
    
    form
    
    
    
    >
    
    
    
    

    
    
    
    
    
    
    
    body
    
    
    
    >
    
    
    
    

    
    
    
    
    
    
    
    html
    
    
    
    >
   
   
   
   

　　很简单，我们在这个页面中左右两侧各放置了一个div。它们都是空的。在页面加载成功之后，我们再读取了menu.aspx页面。

　　【注意】本例中用了一个图片，min.gif.你可以替换掉该图片。尽量小一点。