オーバーレイクリックのメニューを閉じるには、シングルクリックの代わりにダブルクリックする必要があります。

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回クリックする必要があるためです。

オーバーレイをクリックしてメニューを閉じるときに、トグルクラス（「開く」）を試みる可能性があります。