覆盖单击时关闭菜单需要双击而不是单击

Close menu on overlay click requires double click instead of single click

本文关键字：单击 双击 菜单 覆盖      更新时间：2023-09-26

我有一个滑出菜单，当用户点击覆盖时，我想关闭它。菜单关闭了，但要再次打开它，我必须点击切换两次，而不是一次，我哪里错了？谢谢演示此幻灯片输出菜单的示例页

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>

我认为这里的问题是，在单击覆盖后，打开的类仍然在toggleMenu上。

因此，如果在关闭后单击打开菜单，则单击事件将从toggleMenu中删除打开类，从而导致if语句的其他部分被执行（即关闭菜单）。

这就是为什么如果菜单是通过单击覆盖关闭的，那么在打开菜单之前需要单击两次。

您可以尝试在关闭菜单时通过单击覆盖来切换Class（"打开"）。

相关文章：