javascript - 菜单打开时禁用单击并使背景变暗（div）

Question

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

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

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;
}

<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>

标签： javascripthtmljquerycss

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>