使用 HTML、CSS 和 javascript 单击屏幕上的任意位置时如何使导航菜单消失答案

【问题标题】：How to make navigation menu disappear when clicking anywhere on the screen with HTML, CSS, and javascript使用 HTML、CSS 和 javascript 单击屏幕上的任意位置时如何使导航菜单消失
【发布时间】：2020-11-12 08:33:51
【问题描述】：

此网页的导航菜单功能正常。单击导航图标时，将出现菜单，该图标将替换为“X”图标。单击“X”时，导航菜单消失。

但是，最好让它在导航菜单存在时，单击它之外的任何地方也会使其消失。

这是一张背景图片：

HMTL

<html>
    <div id="sideNav">
        <nav>
            <ul>
                <li><a href="#banner">HOME</a></li>
                <li><a href="#">COVID-19</a></li>
                <li><a href="#service">SERVICES</a></li>
                <li><a href="#reviews">REVIEWS</a></li>
                <li><a href="#footer">CONTACT</a></li>
            </ul>
        </nav>      
    </div>
    <div id="menuBtn">
        <img src="images/menu.PNG" id="menu">
    </div>
</html>

CSS

#sideNav{
    width: 200px;
    height: 100vh;
    position: fixed;
    right: -250px;
    top:0;
    background: #009688;
    z-index: 2;
    transition: 0.33s;
}

javascript

    var menuBtn = document.getElementById("menuBtn")
    var sideNav = document.getElementById("sideNav")
    var menu = document.getElementById("menu")

    sideNav.style.right = "-250px";
    
    menuBtn.onclick = function(){
        if(sideNav.style.right == "-250px"){
            sideNav.style.right = "0";
            menu.src = "images/close.PNG";
        }
        else{
            sideNav.style.right = "-250px";
            menu.src = "images/menu.PNG";
        }
    }

【问题讨论】：

标签： javascript html css navigation

【解决方案1】：

使用event.stopPropagation()并将点击事件添加到document

var menuBtn = document.getElementById("menuBtn")
var sideNav = document.getElementById("sideNav")
var menu = document.getElementById("menu")



menuBtn.onclick = function(e) {
  //stop propagation of document click
  e.stopPropagation()

  //toggle side nav
  if (!sideNav.classList.contains("open")) {
    sideNav.classList.add("open");
    menu.src = "images/close.PNG";
  } else {
    sideNav.classList.remove("open");
    menu.src = "images/menu.PNG";
  }
}


//stop propagation on the side nav element
sideNav.onclick = function(e) {
  e.stopPropagation()
}

//close menu when document is clicked
document.onclick = function() {
  sideNav.classList.remove("open");
  menu.src = "images/menu.PNG";
}

#sideNav {
  width: 200px;
  height: 100vh;
  position: fixed;
  right: -250px;
  top: 0;
  background: #009688;
  z-index: 2;
  transition: 0.33s;
}


/*set the right to 0 for class open*/

#sideNav.open {
  right: 0;
}

<html>

<div id="sideNav">
  <nav>
    <ul>
      <li><a href="#banner">HOME</a></li>
      <li><a href="#">COVID-19</a></li>
      <li><a href="#service">SERVICES</a></li>
      <li><a href="#reviews">REVIEWS</a></li>
      <li><a href="#footer">CONTACT</a></li>
    </ul>
  </nav>
</div>
<div id="menuBtn">
  <img src="images/menu.PNG" id="menu">
</div>

</html>

【讨论】：

【解决方案2】：

为了能够点击屏幕上的任意位置并获得某些东西，那么您应该在页面上监听点击任意位置。将事件侦听器附加到document，您可以在其中检查单击的元素是否不是侧导航元素的子元素。

您可以使用closest() 方法检查这一点，该方法类似于运行 DOM 并评估每个父级的 querySelector()。

如果没有点击，那么说明你没有点击侧边导航里面，所以一定是在侧边导航外面。现在您知道可以关闭菜单了。

document.addEventListener('click', event => {
  // If the clicked element is not a child of #sideNav..
  if (event.target.closest('#sideNav') === null) {
    // ..then close navigation..
    // { your code here }
  }
});

【讨论】：

【解决方案3】：

使用 jQuery：

$(document).mouseup(function (e){
    let sideNav = $("#sideNav");
    if (!sideNav.is(e.target) && sideNav.has(e.target).length === 0) {
        sideNav.addClass("hide");
        $("#menu").removeClass("close");
    }
});

纯js：

window.addEventListener('mouseup', function(e){
    var sideNav = document.getElementById("sideNav");
    var menu = document.getElementById("menu")
    if (e.target.id != 'moreDrop') {
        sideNav.classList.add('hide');
    }
});

【讨论】：