Fatal编程技术网
  • javascript/
  • Javascript 单击链接或导航外部时如何关闭导航？

Javascript 单击链接或导航外部时如何关闭导航？

javascript html

Javascript 单击链接或导航外部时如何关闭导航？,javascript,html,onclick,nav,Javascript,Html,Onclick,Nav,各位, 我刚刚开始写我的第一个网站。现在我遇到了第一个问题，没有你的帮助我无法解决 如何更改Javascript，通过单击其中一个链接并单击元素外部来关闭NAV元素 你知道我的意思吗 我希望你能帮助我，非常感谢 <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="Design.css" rel="stylesh

各位,

我刚刚开始写我的第一个网站。现在我遇到了第一个问题，没有你的帮助我无法解决

如何更改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>&nbsp;</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>&nbsp;</p>
  <p>ME</p>
  <p></p>
  <p></p>
  <p>AARAU</p>
  <p> <a href="</a> </p>
  <p>&nbsp;</p>
  <p> <a href="#">IMPRESSUM</a> </p>
  <p>&nbsp;</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
}




函数myFunction（）{
var x=document.getElementById（“myNAV”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
}   


工作















我





阿劳





@字符集“UTF-8”；
html{
身高：100%；
边缘顶部：-13px；
左边距：-7px；
}
身体{
字体系列：Helvetica，“Helvetica Neue”，“Myriad Pro”，“无衬线”，“Frutiger LT Std 65 Bold”；
身高：100%；
最小高度：100%；
}
车身头部hr{
边界：无；
高度：2倍；
颜色：黑色；
背景色：#333333；
}
人力资源{
边界：无；
高度：1px；
/*设置hr颜色*/
颜色：#333；/*旧IE*/
背景色：#333；/*现代浏览器*/
边际上限：0px；
}
车身顶盖h1{
字体大小：粗体；
文本缩进：20px；
高度：41px；
字体大小：120%；
显示：表格单元格；
垂直对齐：中间对齐
}
.标题{
高度：41px；
}
车身头部img{
浮动：左；
宽度：56px；
高度：41px；
}
#我的导航{
背景色：#01FFFF；
宽度：50%；
身高：100%；
利润上限：-17px；
填充顶部：0px；
最小宽度：500px；
}
车身顶盖{
高度：42px；
}
#myNAV p{
字体大小：120%；
字体大小：粗体；
文本缩进：76px；
填充顶部：10px；
边缘顶端：19像素；
清除：左；
}
/*未访问链接*/
#myNAV p a:链接{
颜色：#000000；
文字装饰：无；
}
/*访问链接*/
#myNAV p a:已访问{
颜色：#000000；
文字装饰：无；
}
/*鼠标悬停链接*/
#myNAV p a:悬停{
颜色：#F8；
文字装饰：无；
}
/*选定链接*/
#myNAV p a：活动{
颜色：#f1f1；
文本装饰：无
}
下面是演示链接：

您需要在nav div上设置一个事件侦听器

function toggleVisibilityEventHandler(event) {
    // event is the javascript event that triggered this function call

    // currentTarget is the element we bound this event to
    // your nav bar in this case
    // you also have event.target to get the element that was clicked
    let element = event.currentTarget;
    if (element.style.display === "none") {
        element.style.display = "block";
    } else {
        element.style.display = "none";
    }
}
// find your element ONCE instead of crawling the DOM every time to find it
let nav = document.getElementById("myNAV");

// when the 'click' event is fired on the nav element, call the provided function
nav.addEventListener('click', toggleVisibilityEventHandler);
您需要将单击事件侦听器绑定到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";
  }
}