Вы также можете сделать это без jquery, но лично я бы добавил что-то, чтобы указать, что у чего-то есть подменю, поскольку теперь вам нужно попытаться это выяснить.
let hovering = false;
function toggle(element) {
const nodes = getChildNodes(element.parentElement);
const parentNodes = getChildNodes(element.parentElement.parentElement);
if(parentNodes.length > 1) {
parentNodes.forEach(function(parentNode) {
const parentChildNodes = getChildNodes(parentNode);
if(parentChildNodes.length > 1 && parentChildNodes[1].style.display === 'block' && parentChildNodes[1] !== nodes[1]) {
parentChildNodes[1].style.display = 'none';
}
});
}
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;
}
window.onload = function() {
// For clicks inside the element
document.getElementById('menuElement').onclick = function(e) {
// Make sure the event doesn't bubble from your element
if (e) { e.stopPropagation(); }
else { window.event.cancelBubble = true; }
// Place the code for this element here
};
// For clicks elsewhere on the page
document.onclick = function() {
const uls = document.getElementById('nav').getElementsByTagName('ul');
for (i = 0; i < uls.length; i++) {
uls[i].style.display = 'none';
}
};
};
#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 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;
}
<nav class="navbar">
<div id="ABT-Container">
<ul id="nav">
<li class="w3-animate-right" id="menuElement">
<a href="#" onclick="toggle(this)">
<p class="menu_line"></p>
<p class="menu_line"></p>
<p class="menu_line"></p>
</a>
<ul>
<li>
<a href="#" onclick="console.log('about us clicked')">About US</a>
<ul>
<li></li>
</ul>
</li>
<li>
<a href="#" onclick="toggle(this)">Multi-Levels</a>
<ul>
<li>
<a href="#" onclick="toggle(this)">Sales</a>
<ul>
<li>
<a href="#" onclick="console.log('support clicked')">Support</a>
</li>
</ul>
</li>
<li>
<a href="#" onclick="console.log('another link clicked')">Another Link</a>
</li>
<li>
<a href="#" onclick="console.log('department clicked')">Department</a>
</li>
</ul>
</li>
<li>
<a href="#" onclick="toggle(this)">Multi-Levels2</a>
<ul>
<li>
<a href="#" onclick="toggle(this)">Sales2</a>
<ul>
<li>
<a href="#" onclick="console.log('support2 clicked')">Support2</a>
</li>
</ul>
</li>
<li>
<a href="#" onclick="toggle(this)">Sales3</a>
<ul>
<li>
<a href="#" onclick="console.log('support clicked3')">Support3</a>
</li>
</ul>
</li>
<li>
<a href="#" onclick="console.log('another link2 clicked')">Another Link2</a>
</li>
<li>
<a href="#" onclick="console.log('department clicked2')">Department2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
Редактировать: теперь также закрывается при щелчке где-то не в меню.