Javascript “暴露和隐藏的麻烦”；“滑出”；航行

我正在尝试制作一个滑出式导航（就像在facebook应用程序中一样）。 导航位于div中，类为“.menu”，内容位于“.main”div中。我正在使用jQuery进行导航，到目前为止，代码如下：

$(document).ready(function() {
    $('#open').click(function() {
        $('.menu').animate({
            left:"0"
        });
        $('.menu').addClass('active');
        $('.menu').removeClass('inActive');
        $('.main').animate({
            marginLeft:'+=400px'
        });
    });

    if ($('.menu').hasClass('active')) {
        $('#open').click(function() {
            $('.menu').animate({
                left:"-400px"
            });
        });

        $('.menu').addClass('inActive');
        $('.menu').removeClass('active');

    }

}))

菜单滑出来很好，但我很难把它藏起来。当显示时，它的类从“active”变为“inActive”，所以我可以用if语句检查它是否显示

提前感谢,，

---

Georgi

如果要将两个侦听器放置在同一个元素中，一个用于隐藏，另一个用于取消隐藏，则应该有一个侦听器和其中的条件。大概是这样的：

$('#open').click(function() {
    if ($('.menu').hasClass('active')) {
        //Hide it.
    } else {
       //Show it.
    }
});

---

为什么此代码块位于document.ready内

if ($('.menu').hasClass('active')) {
...
}

上述代码块仅在文档准备就绪时运行一次

您应该为#open设置类似事件监听器的onclick操作，并在监听器处理程序中检查状态（active/inactive）