如何创建滑出菜单？

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将执行一次，并且根据您的代码，仅注册一个click事件。 即在单击事件监听器中同时处理关闭和打开。