Question

我有一个水平菜单。这个菜单有孩子，这些孩子有子孩子。这些菜单来自json文件。这里我想为孩子添加一个箭头图像来显示，这些孩子有子孩子。我该如何添加此图片？我的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>");

    }
}
});

Answer 1

只需在css中执行即可。特殊类sub-menu的元素在后台获得一个箭头图标。

修改当您从json构建菜单时，您已经可以向具有子菜单的菜单项添加一个特殊类，因为您已经在检查那里

... if(sub_menu.hasOwnProperty("Menus") && sub_menu.Menus.length > 0){ $("#menu_" + root_menu.MenuId + " li").last().addClass('hassub'); ...

然后将图标添加到具有类hassub的元素的css中。我把它添加到你的小提琴中：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代码=）

Answer 2

您可以这样做： LIVE DEMO

$("#menu li:has(ul) > a").append('▼');

Answer 3

我不清楚你想要箭头的位置，但你可以做类似

的事情

 #nav > ul > li:hover {
 background: url(images/dropdown_arrow.png) no-repeat scroll 0 0 #FFFFFF;
 border-color: #ccc #ccc #FFFFFF;
 border-style: solid;
 border-width: 1px;
 padding-bottom: 0;
 border-radius:1px;
 }

请参阅此处的小提琴更新 http://jsfiddle.net/ucpcA/15/

Answer 4

您可以在测试后在代码中添加图像，如果它有sub-menu

在li class anchor tag

中的menu-child中添加箭头图片

与您的代码类似：<a href="#">Masters <img src="arrow.png" align="right" width:10px /></a>

如何在javascript中添加图片以供菜单使用

4 个答案: