Question

我正在尝试制作滑出式导航（就像在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');

    }

}）;

菜单滑出来很好，但我隐藏它有困难。在显示时，它的类从“活动”变为“非活动”，因此我可以使用if语句检查它是否显示。

提前致谢，的Georgi

Answer 1

您正在放置两个侦听器，一个用于隐藏，另一个用于取消隐藏到同一个元素，您应该有一个侦听器并且内部有条件。像这样：

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

Answer 2

为什么这个代码块在document.ready中？

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

上面的代码块只在文档准备就绪时运行一次

你应该有#open的事件监听器，onclick动作，并检查监听器处理程序中的状态（活动/非活动）

揭露和隐藏“滑出”导航的麻烦

2 个答案: