Jquery 创建动态ulli结构菜单

我试图创建一个多级菜单，它像树状视图一样显示站点和子站点

我有一个xml示例数据，如下所示

<sites>
    <site name="1">
        <site name="1.1">
            <site name="1.1.1"></site>
        </site>
    </site>
    <site name="2"></site>
    <site name="3">
        <site name="3.1"></site>
    </site>
</sites>

到目前为止，我所写的内容如下：

$.get('Samplexml.xml', function (d) {
    $('#div1').append('<ul></ul>');
        var data = jumpdown(d);
    });
});

function jumpdown(obj) {
    debugger;
    $($.parseXML(obj.xml)).find('site').each(function () {
        var html = "<li>" + $(this).attr("name") + "</li>";
        for (var i = 0; i < $(this).children().length; i++) {
            var y = $($.parseXML($(this).children()[0].xml)).find('site').attr('name');
            // nextlevel = nextlevel + "<ul id='" + y + "'><li>" + y + "</li></ul>";
            html = html + jumpdown($(this));
        }
        nextlevel = nextlevel + "</ul>";
        return nextlevel;
        //var x = $(this).attr('name');
    });
}

$.get（'Samplexml.xml'，函数（d）{
$（'div1'）。追加（'ul>'）；
var数据=跳降（d）；
});
});
功能跳降（obj）{
调试器；
$（$.parseXML（obj.xml））.find（'site'）.each（函数（）{
var html=“
”+$（this）.attr（“name”）+“
”；
对于（var i=0；i<$（this）.children（）.length；i++）{
变量y=$（$.parseXML（$（this.children（）[0].xml））.find（'site'）.attr（'name'）；
//nextlevel=nextlevel+“
“+y+”
”；
html=html+jumpdown（$（this））；
}
nextlevel=nextlevel+“
”；
返回下一级；
//var x=$（this.attr（'name'）；
});
}

不知怎的，我迷路了，无法继续。有人能帮我完成吗。

关于JSFIDLE:

$.get（'Samplexml.xml'，函数（d）
{
var parent=$（'#div1'）。append（'
'）；//标记根元素
var data=$.parseXML（d.xml）；//一次解析响应中的数据
跳转（父级，$（数据）。子级（'sites'）；//启动进程
});
功能跳转（父级、数据）
{
data.children（）.each（函数（）//查找站点节点
{
var list=$（'
'）。附录（父项）；
var p=list.text（$（this.attr（“name”））；
if（$（this）.children（）.length>0）//如果站点包含节点
{
p=$（'
'）。附录（父项）；
跳转（p，$（this））；//仅当此节点作为父节点时执行相同的操作
}
});
}

$.get('Samplexml.xml', function (d) 
{
    var parent = $('#div1').append('<ul></ul>'); //mark the root element
    var data = $.parseXML(d.xml); // parse data from response ONCE

    jumpdown(parent, $(data).children('sites'));   // start the process
});



function jumpdown(parent, data) 
{
    data.children().each(function () // seek for site nodes
    {
        var list = $('<li></li>').appendTo(parent);
        var p = list.text($(this).attr("name")); 

        if ($(this).children().length > 0)  // if site contains nodes
        {
            p = $('<ul></ul>').appendTo(parent);

            jumpdown(p, $(this)); // do the same only as this node as a parent
        }
    });
}