单击侧菜单导航div以外的其他按钮时如何关闭此侧菜单导航

Question

can anybody help me settle this thing ? 有人可以帮我解决这个问题吗？ cause i have problem on closing my side menu navigation bar. 因为我在关闭侧边菜单导航栏时遇到问题。 I only can close the navigation bar when i click on the x mark. 当我单击x标记时，我只能关闭导航栏。 but i want to close it when i click outside of the navigation bar. 但是我想在导航栏外单击时将其关闭。 can anybody help me please.. ? 有人可以帮我吗？

 function openNav() { document.getElementById("mySidenav").style.width = "250px"; document.getElementById("hehe").style.marginLeft = "250px"; document.getElementById("main").style.marginLeft = "250px"; document.body.style.backgroundColor = "rgba(0,0,0,0.4)"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; document.getElementById("hehe").style.marginLeft= "0"; document.getElementById("main").style.marginLeft = "0"; document.body.style.backgroundColor = "white"; } var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight){ panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } } }

 body { font-family: "Lato", sans-serif; transition: background-color .5s; background: url(pic/admin2.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow:hidden; } .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; color: #818181; display: block; transition: 0.3s } .sidenav a:hover, .offcanvas a:focus{ color: #7CFC00; } .sidenav .closebtn { position: absolute; top: -10px; right: 0px; font-size: 50px; } #main { transition: margin-left .5s; padding: 10px; position: absolute; top: 4px; left: 4px; position:fixed absolute relative; border-radius: 0px 118px 118px 118px; -moz-border-radius: 0px 118px 118px 118px; -webkit-border-radius: 0px 118px 118px 118px; border: 6px solid #818181; color: #818181; } #main:hover { border-radius: 0px 118px 118px 118px; -moz-border-radius: 0px 118px 118px 118px; -webkit-border-radius: 0px 118px 118px 118px; border: 6px solid #7CFC00; color: #7CFC00; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } .lalala { position: absolute; bottom: 50px; cursor: pointer; padding: 18px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; } a.accordion:after { content: '\\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px; } a.accordion.active:after { content: "\\2212"; color: #7CFC00; } div.panel { padding: 0 25px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; font-size: 15px; } .navbar { overflow: hidden; background-color: #333; position: fixed; top: 0; width: 100%; } .huhu { position: relative; top: 0px; left: 70px; font-size: 50px; color:#818181; } .text { position: relative; top: 70px; left: 100px; color:#818181; } .head{ text-decoration: none; color:#818181; } .head:hover{ text-decoration: none; color:#7CFC00; } #hehe{ transition: margin-left .5s; }

 <!DOCTYPE html> <html> <head> </head> <body> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <a href="admin.php" class="focus">Home</a> <a href="#" class="accordion">Department</a> <div class="panel"> <a href="AdminDepartmentList.php">List of department</a> <a href="AdminDepartmentAdd.php">Add department</a> </div> <a href="#" class="accordion">User</a> <div class="panel"> <a href="AdminUserList.php">List of User</a> <a href="AdminUserAdd.php">Add User</a> </div> <a href="#" class="accordion">System & Vendor</a> <div class="panel"> <a href="#">List of System</a> <a href="#">List of Vendor</a> <a href="#">Records</a> </div> <a href="#" >User Log</a> <div id="lalala" class="lalala"> <a href="logoutAdmin.php" >Log Out</a> </div> </div> <div id="main"> <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span> </div> <div id="hehe"> <div class="huhu"> <a href="admin.php" class="head"> Vendor Records System </a> </div> <div class="text"> Welcome Admin </div> </div> </body> </html>

Answer 1

use onmouseout attribute on your navigation div and call your closeNav method. 在导航div上使用onmouseout属性，然后调用closeNav方法。

Snippet from your code only: 仅来自您的代码段：

<div id="mySidenav" class="sidenav" onmouseout="closeNav()">

Hope this helps. 希望这可以帮助。 I have tried its working. 我已经尝试过了。

Answer 2

This will help you 这对你有帮助

  var overlay = document.querySelector(".overlay"); function openNav() { document.getElementById("mySidenav").style.width = "250px"; document.getElementById("mySidenav").style.zIndex = 3; document.getElementById("hehe").style.marginLeft = "250px"; document.getElementById("main").style.marginLeft = "250px"; //document.body.style.backgroundColor = "rgba(0,0,0,0.4)"; overlay.classList.add("open"); } function closeNav() { document.getElementById("mySidenav").style.width = "0"; document.getElementById("mySidenav").style.zIndex = 1; document.getElementById("hehe").style.marginLeft= "0"; document.getElementById("main").style.marginLeft = "0"; overlay.classList.remove("open"); //document.body.style.backgroundColor = "white"; } var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight){ panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } } }

  body { font-family: "Lato", sans-serif; transition: background-color .5s; background: url(pic/admin2.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow:hidden; } .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; color: #818181; display: block; transition: 0.3s } .sidenav a:hover, .offcanvas a:focus{ color: #7CFC00; } .sidenav .closebtn { position: absolute; top: -10px; right: 0px; font-size: 50px; } #main { transition: margin-left .5s; padding: 10px; position: absolute; top: 4px; left: 4px; position:fixed absolute relative; border-radius: 0px 118px 118px 118px; -moz-border-radius: 0px 118px 118px 118px; -webkit-border-radius: 0px 118px 118px 118px; border: 6px solid #818181; color: #818181; } #main:hover { border-radius: 0px 118px 118px 118px; -moz-border-radius: 0px 118px 118px 118px; -webkit-border-radius: 0px 118px 118px 118px; border: 6px solid #7CFC00; color: #7CFC00; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } .lalala { position: absolute; bottom: 50px; cursor: pointer; padding: 18px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; } a.accordion:after { content: '\\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px; } a.accordion.active:after { content: "\\2212"; color: #7CFC00; } div.panel { padding: 0 25px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; font-size: 15px; } .navbar { overflow: hidden; background-color: #333; position: fixed; top: 0; width: 100%; } .huhu { position: relative; top: 0px; left: 70px; font-size: 50px; color:#818181; } .text { position: relative; top: 70px; left: 100px; color:#818181; } .head{ text-decoration: none; color:#818181; } .head:hover{ text-decoration: none; color:#7CFC00; } #hehe{ transition: margin-left .5s; } .overlay { height: 100%; width: 100%; position: fixed; z-index: 0; top: 0; left: 0; overflow-x: hidden; transition: 0.5s; } .overlay.open { z-index: 2; background-color: rgba(0, 0, 0, 0.2) }

 <!DOCTYPE html> <html> <head> <title>slidenav</title> </head> <body> <div onclick="closeNav()"" class="overlay"></div> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <a href="admin.php" class="focus">Home</a> <a href="#" class="accordion">Department</a> <div class="panel"> <a href="AdminDepartmentList.php">List of department</a> <a href="AdminDepartmentAdd.php">Add department</a> </div> <a href="#" class="accordion">User</a> <div class="panel"> <a href="AdminUserList.php">List of User</a> <a href="AdminUserAdd.php">Add User</a> </div> <a href="#" class="accordion">System & Vendor</a> <div class="panel"> <a href="#">List of System</a> <a href="#">List of Vendor</a> <a href="#">Records</a> </div> <a href="#" >User Log</a> <div id="lalala" class="lalala"> <a href="logoutAdmin.php" >Log Out</a> </div> </div> <div id="main"> <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span> </div> <div id="hehe"> <div class="huhu"> <a href="admin.php" class="head"> Vendor Records System </a> </div> <div class="text"> Welcome Admin </div> </div> </body> </html>

单击侧菜单导航div以外的其他按钮时如何关闭此侧菜单导航

问题描述

2 个解决方案

解决方案1
0 2017-04-04 07:22:56

解决方案2
0 已采纳 2017-04-04 09:53:16

单击侧菜单导航div以外的其他按钮时如何关闭此侧菜单导航

问题描述

2 个解决方案

解决方案1 0 2017-04-04 07:22:56

解决方案2 0 已采纳 2017-04-04 09:53:16

解决方案1
0 2017-04-04 07:22:56

解决方案2
0 已采纳 2017-04-04 09:53:16