Question

我刚刚开始，我对编程非常陌生，但是我想为我正在测试我的知识的html创建一个滑出式菜单栏，

任何人都可以帮我这个吗？我一直试图弄清楚为什么我的代码在我点击按钮时不起作用：

var isOpened;

function openMenu() {
    $('#sidebar').animate({
        'marginLeft' : "+=248px"
    }, 200);
    $('.mainBody').animate({
        'marginLeft' : "+=248px"
    },200);
    isOpened = true;
};

function closeMenu() {
    $('#sidebar').animate({
        'marginLeft' : "-=248px"
    }, 200);
    $('.mainBody').animate({
        'marginLeft' : "-=248px"
    },200);
    isOpened = false;
};

function animate() {
    if (isOpened === false) {
        $('button').click(function() {
            openMenu();
        });
    } else {
        $('button').click(closeMenu(function(){
            closeMenu();
        }));
    }
};

$(document).ready(animate);

Answer 1

建议不是答案。但是可以帮到你。

而不是代码段中的以下代码，

function animate() {
    if (isOpened === false) {
        $('button').click(function() {
            openMenu();
        });
    } else {
        $('button').click(closeMenu(function(){
            closeMenu();
        }));
    }
};

执行此操作并逐行比较您的代码执行的操作以及以下代码将执行的操作...

function animate() {
    $('button').click(function() {
        if(isOpened === false) {
            openMenu();
        } else {
            closeMenu();
        }
    });
}

$(document).ready将执行一次，根据您的代码，只会注册一个点击事件。这是在单击事件监听器中处理close和open。

如何创建滑出菜单？

1 个答案: