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

Question

此网页的导航菜单功能正常。单击导航图标时，将出现菜单，并且该图标将替换为“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";
        }
    }

Answer 1

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

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

如果没有命中，则表示您没有在侧边导航内点击，所以它一定在侧边导航外。现在您知道可以关闭菜单了。

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

Answer 2

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

Answer 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');
    }
});

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

How to make navigation menu disappear when clicking anywhere on the screen with HTML, CSS, and javascript

html

javascript

css

navigation