菜单打开时禁用单击并使背景变暗 (div)

Question

我有一个侧面菜单，单击按钮时会显示，更改其宽度后会显示。一切工作正常，尽管如此，我想让整个主体（菜单除外）看起来变暗，并且如果可能的话，防止点击菜单以外的任何内容。当菜单关闭时，一切都应该恢复正常。

JS的第二部分用于关闭菜单，当检测到菜单外部的单击时，它可以工作，但我想仅在菜单打开时才使其处于活动状态，例如：

if(menuOpen)
  {
  $(document).mouseup(function(e)  
    {
    var container = $("mySidenav");
    if (!container.is(e.target) && container.has(e.target).length === 0)  
      {
      closeNav();
      }
    });
  }

if(menuOpen)
  {
  $(document).mouseup(function(e)  
    {
    var container = $("mySidenav");
    if (!container.is(e.target) && container.has(e.target).length === 0)  
      {
      closeNav();
      }
    });
  }

var menuOpen = false;

function openNav() {
  document.getElementById("myMenu").style.width = "50%";
  menuOpen = true;
}

function closeNav() {
  document.getElementById("myMenu").style.width = "0%";
  menuOpen = false;
}

$(document).mouseup(function(e) {
  var container = $("mySidenav");

  if (!container.is(e.target) && container.has(e.target).length === 0) {
    closeNav();
  }
});

#myMenu {
  height      : 100%;
  width       : 0;
  position    : fixed;
  z-index     : 1;
  top         : 0;
  right       : 0;
  background  : blue;
  overflow-x  : hidden;
  transition  : 0.5s;
  padding-top : 60px;
  display     : flex;
  align-items : center;
  opacity     : 0.98;
  z-index     : 9;
  color       : #fff;
}

Answer 1

添加覆盖 div 并在菜单打开-关闭时切换其显示属性

var menuOpen = false;
const menu = document.getElementById("myMenu")
const overlay = document.getElementById('overlay')

function openNav() {
  menu.style.width = "50%";
  menuOpen = true;
  overlay.style.display = 'block'
}

function closeNav() {
  menu.style.width = "0%";
  overlay.style.display = 'none'
  menuOpen = false;
}

$('#myMenu').click(function(e) {
  closeNav();
  menuOpen = false;

});

#myMenu {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background: blue;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  display: flex;
  align-items: center;
  opacity: 0.98;
  z-index: 9;
  color: #fff;
}

#overlay {
  position: fixed;
  display: none;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background: rgba(0, 0, 0, 0.5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>This is just random information to make my point clear, don't take too much attention to it.</p>
<a href="javascript:void(0)" class="closebtn" onclick="openNav()">Open Menu</a>
<p>Extra random Stuff</p>
<p>You can close the menu clicking elsewhere the page.</p>
<div id="myMenu">
  <ul>
    <li>This is menu stuff</li>
    <li>Menu Stuff 2</li>
    <li>Menu Stuff 3</li>
  </ul>
</div>
<div id="overlay">

</div>