Question

我正在创建一个与Facebook移动菜单类似的菜单。您可以在此处找到我的进度 - http://jsfiddle.net/923GK/

我希望它在默认状态下折叠，然后当有人点击说“仪表板”时，它会滑出显示仪表板的子列表。如果他们再次单击仪表板，则会切换回默认的关闭状态。如果二级菜单是打开的，他们点击“博客”菜单，而不是再次关闭它只会显示博客子菜单，没有花哨的过渡。

我已经尝试了很长时间但是每次试图让这种工作变得比以前更加混乱。如果任何对jquery更有技巧的人都可以偷看，我会很感激。

Answer 1

var last, elm = $('#menu');

$('.secondary').hide();
elm.css('width', 100);

$('#menu li a').on('click', function(e) {
    e.preventDefault();
    if (elm.width()>100) {
        if (last == this) {
            elm.animate({width: elm.width()<340?350:100});
        }else{
            $(this).next('.secondary').show();
            $(last).next('.secondary').hide();
        }
    }else{
        $(this).next('.secondary').show();
        elm.animate({width: elm.width()<340?350:100});      
    }
    last = this;
});

FIDDLE

动画切换滑动菜单

1 个答案: