覆蓋點擊的關閉菜單需要雙擊而不是單擊

Question

我有一個滑出菜單，當用戶單擊覆蓋圖時我想關閉。菜單關閉，但要再次打開它，我必須單擊切換兩次而不是一次，我在哪裏出錯？謝謝。採樣頁面展示這種slideoutMenu

function expandOverlay() { 
 
    var overlay = document.createElement("div"); 
 
    overlay.setAttribute("id", "overlay04"); 
 
    overlay.setAttribute("class", "overlay04"); 
 
    document.body.appendChild(overlay); 
 
} 
 

 
function restore() { 
 
    document.body.removeChild(document.getElementById("overlay04")); 
 
} 
 

 
// create menu variables 
 
var slideoutMenu = $('.slideout-menu'); 
 
var slideoutMenuWidth = $('.slideout-menu').width(); 
 

 
$(document).ready(function() { 
 
    $('.slideout-menu-toggle').on('click', function(event) { 
 
    event.preventDefault(); 
 
    // toggle open class 
 
    slideoutMenu.toggleClass("open"); 
 

 
    // slide menu 
 
    if (slideoutMenu.hasClass("open")) { 
 
     slideoutMenu.animate({ 
 
     left: "0px" 
 
     }); 
 
     expandOverlay(); 
 
    } else { 
 
     slideoutMenu.animate({ 
 
     left: -slideoutMenuWidth 
 
     }, 250); 
 
     restore(); 
 
    } 
 
    }); 
 

 
}); 
 

 
window.addEventListener('mouseup', function(event) { 
 
    var box = document.getElementById('menu_s'); 
 
    if (event.target != box && event.target.parentNode != box) { 
 
    slideoutMenu.animate({ 
 
     left: -slideoutMenuWidth 
 
    }, 250); 
 
    restore(); 
 
    } 
 
});

<nav> 
 
<ul> 
 
    <li><a href="#" class="lag slideout-menu-toggle">open menu</a></li> 
 
</ul> 
 
</nav> 
 

 
<!--begin slideout menu--> 
 
<div id="menu_s" class="slideout-menu"> 
 
<h3>Last Week<a href="#" class="slideout-menu-toggle">&times;</a></h3> 
 
<div class="fslide"></div> 
 
<ul> 
 
    <li><a href="http://dundaah.com/">Dundaah</a></li> 
 
    <li><a href="http://pics.dundaah.com/">Pics</a></li> 
 
    <li><a href="http://blog.dundaah.com/">Blog</a></li> 
 
    <li><a href="http://music.dundaah.com/">Music</a></li> 
 
</ul> 
 
</div>

Answer 1

我相信這裏的問題是，類開放仍然在toggleMenu點擊疊加後。

因此，如果您在關閉後單擊打開的菜單，click事件將從toggleMenu中刪除打開的類，導致if語句的else部分被執行（即關閉菜單）。

這就是爲什麼在點擊疊加層關閉菜單之前需要點擊2次的原因。

在關閉菜單時，您可以嘗試toggleClass（「打開」），方法是單擊疊加層。