如何創建滑出菜單？

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事件。 即在單擊事件監聽器中同時處理關閉和打開。