Question

我想隐藏侧边栏菜单，当用户点击按钮时会打开它。之后，当用户点击外部菜单时 - 菜单将被关闭。在这种情况下如何实现此功能？

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    }

    function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    }

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

Answer 1

您可以对整个文档元素进行点击，并确定目标是否位于菜单中：

document.documentElement.addEventListener("click", function(e){

    if (e.button != 1) // left mouse
        return;        // anything else => do nothing

    var target = e.target;
    var navItem = document.getElementById("mySidenav");
    do{
        if (target == navItem)
           return; // clicked within "mySidenav" => do nothing
        target = target.parentNode;
    }
    while(target != null);

   // react here     
   closeNav(); // must be implemented somewhere
});

如果您在菜单中检测到点击确实被触发，则根本不会做出反应，否则您可能会在点击被冒泡到项目之前关闭菜单=＆gt;没有检测到菜单项点击。

Answer 2

＆＃13;

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
}
document.addEventListener('mousedown',function(event){
        var side_dom    = document.getElementById("mySidenav")
        if(side_dom.style.width == '250px'){
                if(!side_dom.contains(event.target)){
                        document.getElementById("mySidenav").style.width = "0";
                }
        }       
})

＆＃13;

.sidenav {       
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;   
  top: 0;               
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

＆＃13;

<body>
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</s
</body>

＆＃13;

单击外部菜单后如何关闭菜单？

2 个答案: