如何創建滑出式菜單？

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將執行一次，並根據您的代碼只有一個點擊事件被註冊。這是在一個點擊事件監聽器中關閉和打開的句柄。