Automatic closing ul of toggle menu

Question

In a toggle menu bar, I am trying to achieve an automatic closing of a menu when the user toggles between menus.

i.e., clicking on a new menu area should hide/close the ones that are already opened (being displayed). I tried some ways to hide this on clicking but couldn't succeed.

How to achieve this? The code is included below.

The code:

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;
}

.expand{font-size:24px;float: left;margin: 0px -5px;}

.menu_line{
 width: 25px;
    height: 2px;
    background-color: black;
 color: black;
    margin: 4px 0;
}

#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;
}

.expand{font-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">
<ul id="nav"><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">&#x25C2;</span>Our Technology</a>
<ul>
<li class="w3-animate-right"><a href="#" onclick="toggle(this)"><span class="expand">&#x25C2;</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">&#x25C2;</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">&#x25C2;</span>Multi-Levels</a>
<ul>
<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">&#x25C2;</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>

If i understand correctly, you just have to hide siblings like [here](https://stackoverflow.com/questions/868407/hide-an-elements-next-sibling-with-javascript) — Jakob, Oct 18 '18 at 15:57
i answered this for you here https://stackoverflow.com/questions/52879698/how-can-i-use-of-click-event-for-closing-my-menu-when-we-click-in-other-part-of/52880018#52880018 — Vladimir Mujakovic, Oct 18 '18 at 18:20

Vladimir Mujakovic · Answer 1 · 2018-10-19T13:34:05.160

@edit previous jsbin link wss wrong, this should be the correct bin example here:

https://jsbin.com/metavuq/edit?html,css,js,output

The document has to know you are clicking outside menu. While there are several ways to accomplish this, this is the simplest in my opinion.

Add this id to your markup (inside your inner ul) so you can target it with js easier, like so :

<ul id="dropdown">
 <!-- contents -->
</ul>

Then create an event listener that will listen for a click anywhere that is not your nav element like so:

document.addEventListener('click', function(event) {
  if (event.target.closest('#nav')) {
    return;
  } else {
   document.querySelector('#dropdown').style.display = 'none';  
  }
});

This event listener listens for clicks on the document and performs what you need when the click is outside your specified area.

Automatic closing ul of toggle menu

The code:

1 Answers1