大家
我才刚刚开始编写我的第一个网站。现在我遇到了第一个问题，没有你的帮助我无法解决。
如何更改我的 Javascript，以便通过单击其中一个链接并单击元素外部来关闭我的 NAV 元素？
你明白我的意思吗？
希望您能帮助我，非常感谢!
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="Design.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="header">
<img src="" onClick="myFunction()"></img>
<h1>
</h1>
</div>
<hr>
</header>
<script>
function myFunction() {
var x = document.getElementById("myNAV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<nav id="myNAV">
<p> </p>
<p>WORK</p>
<p> <a href="#"></a> </p>
<p> <a href="#"></a> </p>
<p> <a href="#"></a> </p>
<p> <a href="#"></a> </p>
<p> <a href="#"></a> </p>
<p> <a href="#"></a> </p>
<p> </p>
<p>ME</p>
<p></p>
<p></p>
<p>AARAU</p>
<p> <a href="</a> </p>
<p> </p>
<p> <a href="#">IMPRESSUM</a> </p>
<p> </p>
</nav>
</body>
</html>
@charset "UTF-8";
html {
height: 100%;
margin-top: -13px;
margin-left: -7px;
}
body {
font-family: Helvetica, "Helvetica Neue", "Myriad Pro", "sans-serif", "Frutiger LT Std 65 Bold";
height: 100%;
min-height: 100%;
}
body header hr {
border: none;
height: 2px;
color: black;
background-color: #333333;
}
hr {
border: none;
height: 1px;
/* Set the hr color */
color: #333; /* old IE */
background-color: #333; /* Modern Browsers */
margin-top: 0px;
}
body header h1 {
font-weight: bold;
text-indent: 20px;
height: 41px;
font-size: 120%;
display: table-cell;
vertical-align: middle
}
.header {
height: 41px;
}
body header img {
float: left;
width: 56px;
height: 41px;
}
#myNAV {
background-color: #01FFFF;
width: 50%;
height: 100%;
margin-top: -17px;
padding-top: 0px;
min-width: 500px;
}
body header {
height: 42px;
}
#myNAV p {
font-size: 120%;
font-weight: bold;
text-indent: 76px;
padding-top: 10px;
margin-top: 19px;
clear: left;
}
/* unvisited link */
#myNAV p a:link {
color: #000000;
text-decoration: none;
}
/* visited link */
#myNAV p a:visited {
color: #000000;
text-decoration: none;
}
/* mouse over link */
#myNAV p a:hover {
color: #F8F8F8;
text-decoration: none;
}
/* selected link */
#myNAV p a:active {
color: #F1F1F1;
text-decoration: none
}
这里是演示链接:
最佳答案
您需要将点击事件监听器绑定(bind)到 DOM
//Store the nav in a variable
var nav = document.getElementById('myNAV')
var domClickHandler = function(event){
nav.style.display = 'none'
}
document.addEventListener('click', domClickHandler)
还可以像这样修改您的切换功能
function myFunction(event) {
// this would stop the event from reaching the DOM click listener
event.stopPropagation()
var x = document.getElementById("myNAV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
关于javascript - 单击链接或导航外部时如何关闭导航？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51573412/