菜单中点击事件的问题
Posted
技术标签:
【中文标题】菜单中点击事件的问题【英文标题】：Click event's problems in the menu 【发布时间】：2019-03-23 17:10:57 【问题描述】：我希望我的菜单能够在我点击网站的其他部分时关闭（不打开）菜单。
我知道我必须为此使用点击事件，但是当我使用点击事件时，我的菜单出现了 2 个不必要的问题：
1- 首先，当单击菜单列表时，它会为每个不需要的菜单项显示下划线。
2 - 点击我网站的其他部分后，我的菜单完全消失了，它（菜单）不显示在我的网站上，太糟糕了。
然后我想使用点击事件（或所有类似的东西），但我该如何解决这些不必要的问题？
我太困惑了，如果你得到代码而不是链接，我很感激，谢谢。
代码：
document.addEventListener('click', function(event)
if (event.target.closest('.nav'))
return;
else
document.querySelector('#dropdown').style.display = 'none';
);
function toggle(element)
const nodes = getChildNodes(element.parentElement);
if(nodes[1].style.display === 'block')
nodes[1].style.display = 'none';
else
nodes[1].style.display = 'block';
function getChildNodes(node)
let children = new Array();
for(const child in node.childNodes)
if(node.childNodes[child].nodeType == 1)
children.push(node.childNodes[child]);
return children;
#ABT-Container
font-family: 'Roboto', sans-serif;
background: transparent;
width:100%; float:right;
a
text-align: center;
font-family: 'Roboto', sans-serif;
color: #333;
.nav
float: right;
font-family: 'Roboto', sans-serif;
padding: 2px 6px 0;
line-height: 100%;
border-radius: 1em;
background: white; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF'); /* for IE */
background: -webkit-gradient(linear, right top, right bottom, from(#FFFFFF), to(#FFFFFF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF); /* for firefox 3.6+ */
border: solid 1px white;
.nav .current a, .nav li:hover > a
font-family: 'Roboto', sans-serif;
background: white; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF'); /* for IE */
background: -webkit-gradient(linear, right top, right bottom, from(#FFFFFF), to(#FFFFFF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF); /* for firefox 3.6+ */
color: #444;
border-top: solid 1px #FFFFFF;
/*-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);*/
/* sub levels link hover */
.nav ul li:hover a, .nav li:hover li a
font-family: 'Roboto', sans-serif;
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
.nav ul a:hover
font-family: 'Roboto', sans-serif;
background: #ff4718 !important; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4718', endColorstr='#FF0000'); /* for IE */
background: -webkit-gradient(linear, right top, right bottom, from(#ff4718), to(#FF0000)) !important; /* for webkit browsers */
background: -moz-linear-gradient(top, #ff4718, #FF0000) !important; /* for firefox 3.6+ */
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
.nav li
font-family: 'Roboto', sans-serif;
margin: 0 5px;
padding: 0 0 8px;
float: right;
position: relative;
list-style: none;
/* main level link */
.nav a
font-family: 'Roboto', sans-serif;
color: #353535;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 0em;
-moz-border-radius: 0em;
text-shadow: 0 0px 0px rgba(0, 0, 0, .3);
/* level 2 list */
.nav ul
font-family: 'Roboto', sans-serif;
background: #FFFFFF; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#FFFFFF'); /* for IE */
background: -webkit-gradient(linear, right top, right bottom, from(#fff), to(#FFFFFF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #fff, #FFFFFF); /* for firefox 3.6+ */
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
right: 0;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
/* dropdown */
.nav ul li
font-family: 'Roboto', sans-serif;
float: none;
margin: 0;
padding: 0;
.nav ul a
font-family: 'Roboto', sans-serif;
font-weight: normal;
text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
/* level 3+ list */
.nav ul ul
font-family: 'Roboto', sans-serif;
right: 181px;
top: -3px;
/* rounded corners for first and last child */
.nav ul li:first-child > a
-webkit-border-top-right-radius: 1px;
-moz-border-radius-topleft: 1px;
-webkit-border-top-left-radius: 1px;
-moz-border-radius-topright: 1px;
.nav ul li:last-child > a
-webkit-border-bottom-right-radius: 1px;
-moz-border-radius-bottomleft: 1px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius-bottomright: 1px;
/* clearfix */
.nav:after
font-family: 'Roboto', sans-serif;
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
.nav
font-family: 'Roboto', sans-serif;
display: inline-block;
html[xmlns] .nav
font-family: 'Roboto', sans-serif;
display: block;
* html .nav
height: 1%;
.menu_line
width: 25px;
height: 2px;
background-color: black;
color: black;
margin: 4px 0;
.expandfont-size:24px;float: left;margin: 0px -5px;
.menu_line
width: 25px;
height: 2px;
background-color: black;
color: black;
margin: 4px 0;
<nav id="bg1" class="navbar">
<div id="ABT-Container">
<a href="index.html"><img src="img/new pic/Home.png" /></a>
<ul class="nav" id="dropdown"><li class="w3-animate-right"><a href="#" onclick="toggle(this)"><p class="menu_line"></p><p class="menu_line"></p><p class="menu_line"></p></a>
<ul>
<li class="w3-animate-right"><a href="#" onclick="toggle(this)"><span class="expand">◂</span>Our Technology</a>
<ul>
<li class="w3-animate-right"><a href="#" onclick="toggle(this)"><span class="expand">◂</span>Sub-Row</a>
<ul>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub Sub-Row 1 clicked')">Sub Sub-Row 1</a></li>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub Sub-Row 1 clicked')">Sub Sub-Row 1</a></li>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub Sub-Row 1 clicked')">Sub Sub-Row 1</a></li>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub Sub-Row 1 clicked')">Sub Sub-Row 1</a></li>
</a></li></ul>
</li>
<li class="w3-animate-right"><a href="#" onclick="toggle(this)"><span class="expand">◂</span>Sub-Row</a>
<ul>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub Sub-Row 2 clicked')">Sub Sub-Row 2</a></li>
</ul>
</li>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub Sub-Row clicked')">Sub-Row</a></li>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub Sub-Row clicked')">Sub-Row</a></li>
</ul>
</li>
<li class="w3-animate-right"><a href="#" onclick="toggle(this)"><span class="expand">◂</span>Multi-Levels</a>
<ul id="dropdoswn">
<li class="w3-animate-right"><a href="#" onclick="console.log('Team clicked')">Team</a>
<ul>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Item 1 clicked')">Sub-Level Item 1</a></li>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Item 1 clicked')">Sub-Level Item 1</a>
<ul>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Item 11 clicked')">Sub-Level Item 11</a></li>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Item 22 clicked')">Sub-Level Item 22</a></li>
<li><a href="#" onclick="console.log('Sub-Level Item 33 clicked')">Sub-Level Item 33</a></li>
</ul>
</li>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Item 1 clicked')">Sub-Level Item 1</a></li>
</ul>
</li>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Sales clicked')">Sales</a></li>
<li class="w3-animate-right"><a href="#" onclick="console.log('Another Link clicked')">Another Link</a></li>
<li class="w3-animate-right"><a href="#" onclick="toggle(this)"><span class="expand">◂</span>Department</a>
<ul>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Item 2 clicked')">Sub-Level Item 2</a></li>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Item 2 clicked')">Sub-Level Item 2</a></li>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Item 2 clicked')">Sub-Level Item 2</a></li>
</ul>
</li>
</ul>
</li><li class="w3-animate-right"><a href="#">Services</a></li>
<li class="w3-animate-right"><a href="#">About US</a></li>
<li class="w3-animate-right"><a href="#">Contact US</a></li>
<li class="w3-animate-right"><a href="#">Our Links</a></li>
</li>
</ul>
</ul>
</ul>
</div>
<!-- Header Nav End -->
</nav>【问题讨论】：
要删除锚标签的下划线部分，试试这个***.com/questions/2041388/… 【参考方案1】：document.addEventListener('click', function(event)
if (event.target.closest('.nav'))
return;
else
document.querySelector('#subMenu').style.display = 'none';
// I added an ID to the inner unordered list
);
function toggle(element)
const nodes = getChildNodes(element.parentElement);
if(nodes[1].style.display === 'block')
nodes[1].style.display = 'none';
else
nodes[1].style.display = 'block';
function getChildNodes(node)
let children = new Array();
for(const child in node.childNodes)
if(node.childNodes[child].nodeType == 1)
children.push(node.childNodes[child]);
return children;
#ABT-Container
font-family: 'Roboto', sans-serif;
background: transparent;
width:100%; float:right;
a
text-align: center;
font-family: 'Roboto', sans-serif;
color: #333;
.nav
float: right;
font-family: 'Roboto', sans-serif;
padding: 2px 6px 0;
line-height: 100%;
border-radius: 1em;
background: white; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF'); /* for IE */
background: -webkit-gradient(linear, right top, right bottom, from(#FFFFFF), to(#FFFFFF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF); /* for firefox 3.6+ */
border: solid 1px white;
.nav .current a, .nav li:hover > a
font-family: 'Roboto', sans-serif;
background: white; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF'); /* for IE */
background: -webkit-gradient(linear, right top, right bottom, from(#FFFFFF), to(#FFFFFF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF); /* for firefox 3.6+ */
color: #444;
border-top: solid 1px #FFFFFF;
/*-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);*/
/* sub levels link hover */
.nav ul li:hover a, .nav li:hover li a
font-family: 'Roboto', sans-serif;
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
.nav ul a:hover
font-family: 'Roboto', sans-serif;
background: #ff4718 !important; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4718', endColorstr='#FF0000'); /* for IE */
background: -webkit-gradient(linear, right top, right bottom, from(#ff4718), to(#FF0000)) !important; /* for webkit browsers */
background: -moz-linear-gradient(top, #ff4718, #FF0000) !important; /* for firefox 3.6+ */
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
.nav li
font-family: 'Roboto', sans-serif;
margin: 0 5px;
padding: 0 0 8px;
float: right;
position: relative;
list-style: none;
/* main level link */
.nav a
font-family: 'Roboto', sans-serif;
color: #353535;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 0em;
-moz-border-radius: 0em;
text-shadow: 0 0px 0px rgba(0, 0, 0, .3);
/* level 2 list */
.nav ul
font-family: 'Roboto', sans-serif;
background: #FFFFFF; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#FFFFFF'); /* for IE */
background: -webkit-gradient(linear, right top, right bottom, from(#fff), to(#FFFFFF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #fff, #FFFFFF); /* for firefox 3.6+ */
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
right: 0;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
/* dropdown */
.nav ul li
font-family: 'Roboto', sans-serif;
float: none;
margin: 0;
padding: 0;
.nav ul a
font-family: 'Roboto', sans-serif;
font-weight: normal;
text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
/* level 3+ list */
.nav ul ul
font-family: 'Roboto', sans-serif;
right: 181px;
top: -3px;
/* rounded corners for first and last child */
.nav ul li:first-child > a
-webkit-border-top-right-radius: 1px;
-moz-border-radius-topleft: 1px;
-webkit-border-top-left-radius: 1px;
-moz-border-radius-topright: 1px;
.nav ul li:last-child > a
-webkit-border-bottom-right-radius: 1px;
-moz-border-radius-bottomleft: 1px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius-bottomright: 1px;
/* clearfix */
.nav:after
font-family: 'Roboto', sans-serif;
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
.nav
font-family: 'Roboto', sans-serif;
display: inline-block;
html[xmlns] .nav
font-family: 'Roboto', sans-serif;
display: block;
* html .nav
height: 1%;
.menu_line
width: 25px;
height: 2px;
background-color: black;
color: black;
margin: 4px 0;
.expandfont-size:24px;float: left;margin: 0px -5px;
.menu_line
width: 25px;
height: 2px;
background-color: black;
color: black;
margin: 4px 0;
<nav id="bg1" class="navbar">
<div id="ABT-Container">
<a href="index.html"><img src="img/new pic/Home.png" /></a>
<ul class="nav" id="dropdown"><li class="w3-animate-right"><a href="#" onclick="toggle(this)"><p class="menu_line"></p><p class="menu_line"></p><p class="menu_line"></p></a>
<ul id="subMenu">
<li class="w3-animate-right"><a href="#" onclick="toggle(this)"><span class="expand">◂</span>Our Technology</a>
<ul>
<li class="w3-animate-right"><a href="#" onclick="toggle(this)"><span class="expand">◂</span>Sub-Row</a>
<ul>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub Sub-Row 1 clicked')">Sub Sub-Row 1</a></li>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub Sub-Row 1 clicked')">Sub Sub-Row 1</a></li>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub Sub-Row 1 clicked')">Sub Sub-Row 1</a></li>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub Sub-Row 1 clicked')">Sub Sub-Row 1</a></li>
</a></li></ul>
</li>
<li class="w3-animate-right"><a href="#" onclick="toggle(this)"><span class="expand">◂</span>Sub-Row</a>
<ul>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub Sub-Row 2 clicked')">Sub Sub-Row 2</a></li>
</ul>
</li>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub Sub-Row clicked')">Sub-Row</a></li>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub Sub-Row clicked')">Sub-Row</a></li>
</ul>
</li>
<li class="w3-animate-right"><a href="#" onclick="toggle(this)"><span class="expand">◂</span>Multi-Levels</a>
<ul id="dropdoswn">
<li class="w3-animate-right"><a href="#" onclick="console.log('Team clicked')">Team</a>
<ul>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Item 1 clicked')">Sub-Level Item 1</a></li>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Item 1 clicked')">Sub-Level Item 1</a>
<ul>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Item 11 clicked')">Sub-Level Item 11</a></li>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Item 22 clicked')">Sub-Level Item 22</a></li>
<li><a href="#" onclick="console.log('Sub-Level Item 33 clicked')">Sub-Level Item 33</a></li>
</ul>
</li>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Item 1 clicked')">Sub-Level Item 1</a></li>
</ul>
</li>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Sales clicked')">Sales</a></li>
<li class="w3-animate-right"><a href="#" onclick="console.log('Another Link clicked')">Another Link</a></li>
<li class="w3-animate-right"><a href="#" onclick="toggle(this)"><span class="expand">◂</span>Department</a>
<ul>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Item 2 clicked')">Sub-Level Item 2</a></li>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Item 2 clicked')">Sub-Level Item 2</a></li>
<li class="w3-animate-right"><a href="#" onclick="console.log('Sub-Level Item 2 clicked')">Sub-Level Item 2</a></li>
</ul>
</li>
</ul>
</li><li class="w3-animate-right"><a href="#">Services</a></li>
<li class="w3-animate-right"><a href="#">About US</a></li>
<li class="w3-animate-right"><a href="#">Contact US</a></li>
<li class="w3-animate-right"><a href="#">Our Links</a></li>
</li>
</ul>
</ul>
</ul>
</div>
<!-- Header Nav End -->
</nav>【讨论】：
【参考方案2】：您不应隐藏#dropdown 本身。您应该将 ul 隐藏在该无序列表下。
请正确格式化您的代码，以便您得到正确的响应。
document.addEventListener('click', function(event)
if (event.target.closest('.nav'))
return;
else
document.querySelector('#subMenu').style.display = 'none';
);
【讨论】：
【参考方案3】：这条线正在使您所有具有id="dropdown"（父母和孩子）的div元素消失，因为您设置为display: none
尝试删除它
document.querySelector('#dropdown').style.display = 'none';
请尝试拨打toggle() funciton
【讨论】：
以上是关于菜单中点击事件的问题的主要内容，如果未能解决你的问题，请参考以下文章
C#.NET中如何设置CONTEXTMENU菜单项的点击事件
sidebar菜单 给menustrip 点击事件赋值的问题请教