javascript - 滑入菜单 - Canvas 外

Question

我有一个使用 CSS 隐藏在 View (对于移动设备)之外的菜单:

#filter-column {
    position:absolute;
    left:-400px;
}

当用户单击链接时，我想隐藏除将从左侧滑入的菜单之外的所有其他内容。我希望在图层关闭时发生相反的情况。

我有以下 jQuery:

    // Show/hide filters on mobile //
    $("#openMobileFilters").click(function(){   
        $("#filter-column").animate({left:'0'},600).css('position', 'relative');
        $('#results-container, #footer').addClass('hidden-xs');
    }); 
    $(".closeFilters").click(function(){
        $("#filter-column").animate({left:'-400px'},600).css('position', 'absolute');
        $('#results-container, #footer').removeClass('hidden-xs');
    });

问题是当我单击隐藏内容显示的菜单时，它实际上被隐藏了。有更好的方法吗？

Answer 1

没有在 fiddle 中看到这个 Action ，我只能建议你将隐藏类的删除移动到 animate 的完整功能

$(".closeFilters").click(function(){
    $("#filter-column").animate({left:'-400px'}, 600, function() {
        $('#results-container, #footer').removeClass('hidden-xs');
    }).css('position', 'absolute');
});

目前，您在动画播放时显示内容，这就是为什么您会立即看到内容的原因。