时间戳

首页 > 解决方案 > 单击链接或导航外部时如何关闭导航？

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

问题描述

每个人，

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

如何更改我的 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
}

这是演示链接：

标签： javascripthtmlonclicknav

解决方案

您需要将单击事件侦听器绑定到 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";
  }
}

推荐阅读