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

Trouble with revealing and hiding "Slide-Out" Navigation

本文关键字：滑出 航行 麻烦 隐藏 暴露      更新时间：2024-05-24

我正在尝试制作一个滑出导航（就像在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')) {
...
}

当文档准备好时，上述代码块只运行一次

您应该有类似事件侦听器的onclick操作，用于#open，并检查侦听器处理程序中的状态（活动/非活动）

相关文章：