我有一个水平菜单。这个菜单有子项，这些子项有子项。这些菜单来自 json 文件。在这里我想为 child 添加一个箭头图像以供显示，这些 child 有子 child 。我怎样才能添加这个图像？ 我的 javascript 页面是
$(function() {
for(var i = 0, j = data[0].menu.length; i<j; i++) {
var root_menu = data[0].menu[i];
if(root_menu.hasOwnProperty("MenuId")) {
$("#menu").append('<li><a href="#" class="parent-menu">' + root_menu.MenuName + '</a>');
if(root_menu.hasOwnProperty("Menus") && root_menu.Menus.length > 0) {
$("#menu li").last().append("<ul class='child-list' id='menu_" + root_menu.MenuId + "'>");
for(var n = 0, m = root_menu.Menus.length; n<m; n++) {
var sub_menu = root_menu.Menus[n];
if(sub_menu.hasOwnProperty("MenuId")) {
$("#menu_" + root_menu.MenuId).append("<li class='menu-child'><a href='#'>" + sub_menu.MenuName + "</a></li>");
if(sub_menu.hasOwnProperty("Menus") && sub_menu.Menus.length > 0){
$("#menu_" + root_menu.MenuId + " li").last().append("<ul class='subchild-list' id='menu_" + sub_menu.MenuId + "'>");
for(var oo = 0, pp = sub_menu.Menus.length; oo<pp; oo++){
var subsub_menu = sub_menu.Menus[oo];
$("#menu_" + sub_menu.MenuId).append('<li class="nav-subchild"><a href="#">' + subsub_menu.MenuName + '</a>');
}
$("#menu_" + root_menu.MenuId + " li").last().append("</ul>");
}
}
}
}
$("#menu").append("</ul></li>");
}
}
});
最佳答案
只需在 css 中完成即可。
特殊类子菜单的元素在背景中获得一个箭头图标。
编辑: 当您从 json 构建菜单时，您已经可以向具有子菜单的菜单项添加一个特殊的类，因为您已经在那里检查了
...
if(sub_menu.hasOwnProperty("Menus") && sub_menu.Menus.length > 0){
$("#menu_" + root_menu.MenuId + " li").last().addClass('hassub');
...
然后将图标添加到类为 hasssub 的元素的 css 中。
我将此添加到您的 fiddle 中:http://jsfiddle.net/ucpcA/18/
编辑:
或者，您可以在添加 ul 时在完全相同的步骤中将一个字符附加到字符串
元素(这一步你会做任何方式)。正如我已经在对 roXon 的回答的评论中所写的那样，但我也会在这里添加它:
...
if(sub_menu.hasOwnProperty("Menus") && sub_menu.Menus.length > 0){
$("#menu_" + root_menu.MenuId + " li").last().append(" ▼ <ul class='subchild-list' id='menu_" + sub_menu.MenuId + "'>");
...
然后就没有额外的css代码=)
关于jquery - 如何在javascript中为菜单添加图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15133205/