如何使用XML＆amp;创建动态菜单jQuery的

Question

我有一个xml，如下面的

上面的

是我的xml文件的一个例子。现在我的要求是读取xml文件并使用jquery构建菜单。

有人可以帮助我吗

Answer 1

你可以试试这个

<强> XML

<?xml version="1.0" encoding="utf-8" ?>
    <MenuRoot>
        <Menu id="home" text="Home" url="home.aspx"></Menu>
        <Menu id="projects" text="Projects" url="projects.aspx">
            <SubMenu id="sub1" text="Sub One" url="subone.aspx"></SubMenu>
            <SubMenu id="sub2" text="Sub Two" url="subtwo.aspx"></SubMenu>
        </Menu>
    </MenuRoot>

<强> HTML

<div id="menu_wrapper"></div>

<强> JS

$(document).ready(function(){
        $.ajax({
            type: "GET",
            url: "jquery_xml.xml",
            dataType: "xml",
            success: function(xml){
                var ul_main=$("<ul />");
                $(xml).find("Menu").each(function(){
                    if($(this).children().length)
                    {
                        var ulSub=$("<ul />");
                        $(this).children().each(function(){
                            ulSub.append("<li id="+$(this).attr("id")+"><a href="+$(this).attr("url")+">"+$(this).attr("text")+"</a></li>");
                        });
                        var li=$("<li id="+$(this).attr("id")+"><a href="+$(this).attr("url")+">"+$(this).attr("text")+"</a></li>");
                        ul_main.append(li.append(ulSub))
                    }
                    else ul_main.append("<li id="+$(this).attr("id")+"><a href="+$(this).attr("url")+">"+$(this).attr("text")+"</a></li>");
                });
                $("#menu_wrapper").append(ul_main);
            }
        });
});

<强>输出

您只需使用css设置菜单样式。