Question

所有人

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

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

这是演示链接：

Answer 1

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

Answer 2

您需要在导航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);

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

2 个答案: