Помогите с многоуровневым меню с json и jquery - PullRequest
Новая
       17

Помогите с многоуровневым меню с json и jquery

12 голосов
/ 16 мая 2011

Я пытаюсь сделать многоуровневое меню, которое открывается при нажатии кнопки «>». Первая проблема заключается в том, что CSS не работает должным образом,

1 Ответ

4 голосов
/ 18 мая 2011

решаемая.

Используйте 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/

UPDATE

Вот скрипка без моркови, если нет детей: http://jsfiddle.net/maniator/CxBrW/36/

...