jQuery用户界面菜单赢得'；不要渲染第二层

我只是第一次使用jQueryUI，我遇到了一些麻烦。我试图获得一个两层菜单，但第二层没有渲染。。相反，应该放在第二层的项目被添加到第一层

这是我的标记：

<div id='maps'>
    <h2>Maps</h2>
    <ul id='maps-list'>
    </ul>
</div>

地图

使用以下javascript函数添加内容：

function maps_reload() {

    map_list().done( function( data ) {

        var list = '';
        for( i = 0; i < data.length; i++ ) {
            list += '<li><a href="javascript:map_display_info( ' + data[i].id + ')">' + data[i].name + '</a>';
            list += '<ul>';
            list += '<li><a href="javascript:update_map( ' + data[i].id + ' )">Update Map</a></li>';
            list += '<li><a href="javascript:display_map( ' + data[i].id + ' )">Display Map</a></li>';
            list += '<li><a href="javascript:delete_map( ' + data[i].id + ' )">Delete Map</a></li>';
            list += '</ul></li>';
        }
        list += '<li>&nbsp;</li>';
        list += '<li><a href="javascript:show_add_map()">Add a new map</a></li>';
        $( '#maps-list' ).html( list );
    });

    $( '#maps-list' ).menu();
}

函数映射\u reload（）{
map_list（）.done（函数（数据）{
var列表=“”；
对于（i=0；i”；
列表+='
'；
列表+='
'；
列表+='
'；
列表+=''；
}
列表+='
'；
列表+='
'；
$（“#地图列表”）.html（列表）；
});
$（“#地图列表”）.menu（）；
}

由此产生的结构是

<ul id='maps-list'>
    <li>
         <a>Map</a>
         <ul>
               <li><a>Update Map</a></li>
               <li><a>Display Map</a></li>
               <li><a>Delete Map</a></li>
         </ul>
    <li>
</ul>

地图

更新地图
显示地图
删除地图

符合要求的。。。我想是吧

有人能在我的代码中看到任何问题吗

---

干杯

我想你需要为你的链接添加锚，就像为每个菜单项添加锚一样，这样才能起作用（除非我注意到你有每个菜单项的链接。）

例如：

我认为您的代码中没有问题此代码正在运行，如果要测试它，则需要调用函数

$（“#映射列表”）.menu（）在函数的外部
映射\u reload（）

测试小提琴
你想让布局看起来像什么请注意Delphi和Salzburg是如何拥有第二层菜单的？这就是我希望发生的为什么锚不显示在HTML中？
<ul id='maps-list'>
    <li>
         <a href="#" >Map</a>
         <ul>
               <li><a href="#">Update Map</a></li>
               <li><a href="#">Display Map</a></li>
               <li><a href="#">Delete Map</a></li>
         </ul>
    <li>
</ul>