阵列动态菜单逻辑？

好吧，我想要做的是创建一个基于数组的动态菜单第一个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); 


});

来源

2012-03-21 Aaron

在宣布你的阵列nav您可以nav[index]访问它的元素，但你不能只是说nav[0][0]添加第二个维度项0 - 你需要使用它之前宣布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>

你可以做到这一点，像这样：

var $menu = $("<ul></ul>"); 
$.each(nav, function(i, val) { 
    var $item = $("<li></li>").html(val.title), 
     $sub = $("<ul></ul>"); 
    $.each(val.submenu, function(j, sub) { 
     $sub.append($("<li></li>").html(sub)); 
    }); 
    $menu.append($item.append($sub));  
}); 
$("body").append($menu);

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

当然，你可以建立菜单起来像一个字符串你的原始代码，但我已经选择创建元素，因为我去。

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

来源

2012-03-21 21:30:41 nnnnnn

你试图建立你的层次结构的方式将无法正常工作（如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/

来源

2012-03-21 21:33:47 Yoshi

我不知道一个数组是最好的方式。您可以使用混合的数组和对象，这会让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);

来源

2012-03-21 21:37:53 elclanrs

我使用的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>

来源

2014-05-04 19:29:56 fubu

阵列动态菜单逻辑？

回答

相关问题