Question

好的我要做的是创建一个基于数组的动态菜单第一个dimesion元素将是顶级，第二个维度级别将是所述父级的子项目，我将如何做到这一点？

$(document).ready(function(e) {
//var maxLevels = 3;//Max Levels Of The List TO Traverse

var nav = new Array();
nav[0] = "Item A";
nav[0][0] = "Item AB"; 
nav[1] = "Item B";
nav[1][0] = "Item BA";

var menu = "";
nav.forEach(function(e) {
    menu += "<li>" + e + "</li>";
});


$('#info').html(menu);


});

Answer 1

宣布您的数组nav后，您可以使用nav[index]访问其元素，但只能通过说nav[0][0]无法向项目0添加第二个维度 - 您需要声明{{ 1}}在使用之前作为数组：

nav[0]

但你可以在一个带有数组文字的语句中声明它，为了你的目的，我建议一个对象数组：

nav[0] = [];
nav[0][0] = ...

如果你想要的输出是这样的：

var nav = [
    { "title" : "Item A",
      "submenu" : [ "Item A1", "Item A2" ] },
    { "title" : "Item B",
      "submenu" : [ "Item B1", "Item B2", "Item B3"] }
];

你可以这样做：

<ul>
   <li>Item A
       <ul>
           <li>Item A1</li>
           <li>Item A2</li>
       </ul>
   </li>
   <li>Item B
       <ul>
           <li>Item B1</li>
           <li>Item B2</li>
           <li>Item B3</li>
       </ul>
   </li>
</ul>

演示：http://jsfiddle.net/9kRs3/

当然，您可以像在原始代码中一样将菜单构建为字符串，但我选择创建元素。

使用上面的对象结构，您可以轻松添加一些额外的属性来定义单击每个项目时会发生什么。并且您可以使子菜单数组中的每个项目具有与顶层相同的对象结构，以便您可以根据需要嵌套越来越多的级别。

Answer 2

您尝试构建层次结构的方式不起作用（如nnnnnn已经解释过的那样）。

你可以尝试这样的东西，它可以用于任何级别：

var nav = [{
    label: 'Item A',
    children: [{
        label: 'Item AB',
        children: []
    }]
}, {
    label: 'Item B',
    children: [{
        label: 'Item BA',
        children: []
    }]
}];

var menu = [];

(function build(elements) {
   menu.push('<ul>');
   $.each(elements, function (i, val) {
     menu.push('<li>', val.label);
     build(val.children);
     menu.push('</li>');
   });
   menu.push('</ul>');
}(nav));

$('#info').html(menu.join(''));

演示：http://jsfiddle.net/jw3zm/

Answer 3

我不确定阵列是最好的方法。你可以使用混合的数组和对象，它会更容易IMO。这适用于一个子菜单，但可以扩展... http://jsfiddle.net/elclanrs/Tp4KM/

var menu = {
    about: ['one', 'two', 'three'],
    contact: ['four', 'five']
};

var items = '';

for (var m in menu) {
    items +=
        '<ul class="menu">' +
            '<li><a href="#">' + m + '</a>' +                
                '<ul>' +
                    '<li><a href="#">' +
                    menu[m].join('</a></li><li><a href="#">') +
                    '</a></li>' +
                '</ul>' +
            '</li>' +
        '</ul>';
}

$('body').append(items);

Answer 4

我使用Yoshi的javascript，在这里你可以看到我的HTML代码。问题是我的网站是空白的，不显示列表。我不明白为什么它没有运行，因为代码没有显示错误。

    <!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Menu</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
    <script src="script.js" type="text/javascript"></script>
    </head>
<body>
    <div id="info"></div>
</body>
</html>

阵列动态菜单逻辑？

4 个答案: