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

FIDDLE