jquery - jQuery UI 菜单不会呈现第二层

Question

我只是第一次使用 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();
}

得到的结构是

<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>

哪个符合要求...我想？

任何人都可以在我的代码中看到任何问题吗？

干杯

Answer 1

我认为你的代码没有问题，这段代码可以正常工作，如果你想测试它，那么你需要在函数$( '#maps-list' ).menu();之外调用函数maps_reload()。

测试小提琴http://jsfiddle.net/4LUDz/1/

Answer 2

我认为您需要为链接添加锚点，例如每个菜单项才能正常工作（除了我注意到您有每个菜单项的链接嗯。）

示例：http: //jsfiddle.net/7dw9h/

http://api.jqueryui.com/menu/

<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>