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

最新推荐文章于 2023-09-06 11:44:59 发布

chen_xizhang

最新推荐文章于 2023-09-06 11:44:59 发布

阅读量846

点赞数

分类专栏： [随笔分类]网络开发和设计 [网站分类]jQuery [随笔分类]网络开发和设计 [发布至博客园首页] 文章标签： jquery div ajax框架 microsoft function ajax

本文链接：https://blog.csdn.net/chen_xizhang/article/details/5992857

版权

[随笔分类]网络开发和设计同时被 3 个专栏收录

90 篇文章 0 订阅

订阅专栏

[随笔分类]网络开发和设计

88 篇文章 0 订阅

订阅专栏

[发布至博客园首页]

69 篇文章 0 订阅

订阅专栏

最近在讲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=>
    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>

chen_xizhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用jquery构造自己的多级菜单

最近在讲AJAX方面的一些理论和在项目中的应用。我介绍到了AJAX的一些内部原理，以及两套AJAX框架：Microsoft ASP.NET AJAX和jquery. 我个人很喜欢Jquery，我对它的赞美从不吝啬。呵呵关于Jquery，其实之前就写过不少，有兴趣的可以参考 http://zzk.cnblogs.com/s?w=blog%3Achenxizhang%20jquery 课程中讲到一个问题，就是如何动态生成多级菜单。我知道网上有不少类似的菜单。但既然咱学了Jquery，为什么不可以尝试自己实
复制链接

扫一扫