Question

我正在尝试做一个多级菜单，当“＆gt;”时会滑动点击。第一个问题是CSS无法正常工作，＆lt; ul＆gt;没有浮动到左边。

我需要的只显示一个ul，如果“＆gt;”单击显示“子”菜单滑动或显示它，任何方法都很有用。

准备好测试的完整代码是here

我正在尝试这样做：menu

的JavaScript

$(document).ready(function(){
    var json = [{"id":"1","parent":"0","slug":"digitalart","name":"Digital Art"},{"id":"2","parent":"1","slug":"3d","name":"3-Dimensional Art"},{"id":"39","parent":"1","slug":"drawings","name":"Drawings"},{"id":"3","parent":"2","slug":"abstract","name":"Abstract"},{"id":"4","parent":"2","slug":"characters","name":"Characters"},{"id":"12","parent":"2","slug":"objects","name":"Objects"},{"id":"23","parent":"2","slug":"scenes","name":"Scenes"},{"id":"32","parent":"2","slug":"unsorted","name":"Unsorted"},{"id":"33","parent":"2","slug":"vehicles","name":"Vehicles"},{"id":"5","parent":"4","slug":"creatures","name":"Animals & Creatures"},{"id":"6","parent":"4","slug":"cartoon","name":"Cartoon"},{"id":"7","parent":"4","slug":"female","name":"Female"},{"id":"8","parent":"4","slug":"groups","name":"Groups"},{"id":"9","parent":"4","slug":"machines","name":"Machines & Robots"},{"id":"10","parent":"4","slug":"male","name":"Male"},{"id":"11","parent":"4","slug":"misc","name":"Miscellaneus"}];
    build_menu(json, 0);
});

function build_menu(json, parent){
    var menu;
    var item = "";
    var counter = 0;
    if(parent != '0'){
        item += '<li><a class="more" onClick="show(); return false;" href="#">Back</a></li>';
    }
    $.each(json, function(i, category) {
        if(category.parent == parent){
            var more = '<a class="more" onClick="show('+parent+'); return false;" href="#">></a>';

            item = item + '<li>' + category.name + more + '</li>';
            build_menu(json, category.id);
            counter++;
        }
    });

    if(counter > 0){    
        menu = '<ul class="menu" id="category' + parent + '">' + item + '</ul>';
        $('#menu').prepend(menu);
    }
}

function show(id){
    $(".menu").hide();
    $("#category"+id).show();
}

CSS

#menu{
    width: 180px;
    overflow: hidden;
}

#menu ul{
    width: 180px;
    float: left;
    list-style: none;
}

#menu ul li{
    border: solid 1px black;
    margin-bottom: 5px;
}

#menu li .more{
    //float: right;
    text-decoration: none;
    margin-right: 5px;
}

HTML

<div id="menu">
</div>

Answer 1

解决。

使用jQuery：

build_menu(json, 0);
    $('.back').hide();
    $('ul').not('.parent').hide();
});

function build_menu(json, parent, parentID) {
    var menu, li;
    var item = $('<ul class="menu ' + (parent == '0' ? 'parent' : '') + '" id="category' + parent + '"></ul>');
    var counter = 0;
    if (parent != '0') {
        li = $('<li><a class="back" href="#">Back</a></li>');
        li.click(function() {
            $('.back').hide();
            $("#category" + parentID).show();
            $("#category" + parent).hide();
            $('.back', $("#category" + parentID)).show();
            return false;
        })

        li.appendTo(item);
    }
    $.each(json, function(i, category) {
        if (category.parent == parent) {
            var more = $('<a class="more" href="#">></a>');
            more.click(function(e) {
                e.preventDefault();
                $('.back', $("#category" + category.id)).show();
                $("#category" + category.id).show();
                $("#category" + parent).hide();
                console.log("#category" + category.id, $("#category" + category.id));
                if ($("#category" + category.id).length <= 0) { //NO CHILDREN
                    $('.back').hide();
                    $("#category" + parent).show();
                    $('.back', $("#category" + parent)).show();
                }
                return false;
            })
            li = $('<li>' + category.name + '</li>');
            more.appendTo(li);
            li.appendTo(item);
            build_menu(json, category.id, parent);
            counter++;
        }
    });

    if (counter > 0) {
        menu = item;
        $('#menu').prepend(menu);
    }
}

小提琴：http://jsfiddle.net/maniator/CxBrW/25/
摆放幻灯片动画：http://jsfiddle.net/maniator/CxBrW/26/

<强>更新：

如果没有孩子，这里没有胡萝卜：http://jsfiddle.net/maniator/CxBrW/36/

使用json和jquery帮助处理多级菜单

1 个答案: