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

我认为您需要为链接添加锚点，例如每个菜单项都可以使用（除了我注意到每个菜单项都有链接嗯。）

示例：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>

Answer 2

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

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

jQuery UI菜单无法呈现第二层

2 个答案: