Javascript 单击外部和链接后关闭切换菜单_Javascript_Html_Css_Toggle_Navbar

Javascript 单击外部和链接后关闭切换菜单

javascript html css

Javascript 单击外部和链接后关闭切换菜单,javascript,html,css,toggle,navbar,Javascript,Html,Css,Toggle,Navbar,我目前正在使用w3school的这个简单切换菜单我想知道当在它外部或链接（徽标、新闻、联系人、关于）上单击时，如何编辑它以关闭它身体{ 字体系列：Arial、Helvetica、无衬线字体； } .流动货柜{ 最大宽度：480px；保证金：自动；背景色：#555；高度：500px；颜色：白色；边界半径：10px； } 托普纳夫先生{ 溢出：隐藏；背景色：#333；位置：相对位置； } .topnav#myLinks{ 显示：无； } .topnav a{ 颜色：白色；填充：

我目前正在使用w3school的这个简单切换菜单

我想知道当在它外部或链接（徽标、新闻、联系人、关于）上单击时，如何编辑它以关闭它


身体{
字体系列：Arial、Helvetica、无衬线字体；
}
.流动货柜{
最大宽度：480px；
保证金：自动；
背景色：#555；
高度：500px；
颜色：白色；
边界半径：10px；
}
托普纳夫先生{
溢出：隐藏；
背景色：#333；
位置：相对位置；
}
.topnav#myLinks{
显示：无；
}
.topnav a{
颜色：白色；
填充：14px 16px；
文字装饰：无；
字号：17px；
显示：块；
}
.topnav a.icon{
背景：黑色；
显示：块；
位置：绝对位置；
右：0；
排名：0；
}
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
.主动{
背景色：#4CAF50；
颜色：白色；
}
垂直移动导航条
此示例演示了移动/智能手机上的导航菜单的外观
点击右上角的汉堡包菜单（三条），切换菜单
函数myFunction（）{
var x=document.getElementById（“myLink”）；
如果（x.style.display==“块”）{
x、 style.display=“无”；
}否则{
x、 style.display=“block”；
}
}

最简单的方法是在整个文档中添加一个事件侦听器，并使用条件来查看单击的位置。这是一个具有以下逻辑的代码笔：

HTML:

JS:

可能重复：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.mobile-container {
  max-width: 480px;
  margin: auto;
  background-color: #555;
  height: 500px;
  color: white;
  border-radius: 10px;
}

.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>

<!-- Simulate a smartphone / tablet -->
<div class="mobile-container">

<!-- Top Navigation Menu -->
<div class="topnav">
  <a href="#home" class="active">Logo</a>
  <div id="myLinks">
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

<div style="padding-left:16px">
  <h3>Vertical Mobile Navbar</h3>
  <p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.</p>
  <p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.</p>
</div>

<!-- End smartphone / tablet look -->
</div>

<script>
function myFunction() {
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<!-- Simulate a smartphone / tablet -->
<div class="mobile-container">

<!-- Top Navigation Menu -->
<div class="topnav">
  <a href="#home" class="active">Logo</a>
  <div id="myLinks">
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>
  <a href="#" class="icon" id="myButton">
    <i id="itag" class="fa fa-bars"></i>
  </a>
</div>

<div style="padding-left:16px">
  <h3>Vertical Mobile Navbar</h3>
  <p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.</p>
  <p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.</p>
</div>

<!-- End smartphone / tablet look -->
</div>

body {
  font-family: Arial, Helvetica, sans-serif;
}

.mobile-container {
  max-width: 480px;
  margin: auto;
  background-color: #555;
  height: 500px;
  color: white;
  border-radius: 10px;
}

.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

const button = document.getElementById('myButton');
const div = document.getElementById('myLinks');
const icon = document.querySelector('.icon');
console.log(icon);

document.addEventListener('click', myFunction)

function myFunction(e) {
  e.preventDefault();
  console.log(e.target);

  if((div.style.display === '' || div.style.display === 'none') && (e.target === button || e.target === itag)) {
    div.style.display = 'block';    
  } else if((div.style.display === '' || div.style.display === 'none') && (e.target !== button || e.target !== itag)) {
    div.style.display = 'none';
  } else {
    div.style.display = 'none';
  }
}