jquery - 动画切换滑动菜单

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;
});

小提琴