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

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

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

解决方法

要能够在屏幕上的任意位置单击并获得某些内容，那么您应该在页面上的任意位置听点击。将事件侦听器附加到document上，在此处检查单击的元素是否不是side nav元素的子元素。

您可以使用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 }
  }
});

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

使用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单击屏幕上的任意位置时，如何使导航菜单消失

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

解决方法

相关推荐