子菜单问题

Question

I have a menu with submenus. The submenus open on click, but don't close when clicking another. Always one submenu should be visible at a time, I want when I click on another list in my menu the submenus that I already opened automatically close (not stay open) , what can I do?

For solving these problems:

Somebody said : you have to change the html code and put the /ul in the end of your html codes.

Somebody else said : you can either loop over all relevant items and set them to display:none first, and then set block for the one item you actually want to open; or you remember which the last opened item was in a variable, and then specifically reset only that.

I did all of them , but it still doesn't work or I don't know how can I use these guids , Can you please correct my code if it's possible ? Honestly I'm too confused and I don't know what can I do.

The code:

 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 { text-decoration: none; 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);*/ } .nav ul li:hover a, .nav li:hover li a { text-decoration: none; font-family: 'Roboto', sans-serif; background: none; border: none; color: #666; -webkit-box-shadow: none; -moz-box-shadow: none; } .nav ul a:hover { text-decoration: none; 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 { text-decoration: none; font-family: 'Roboto', sans-serif; margin: 0 5px; padding: 0 0 8px; float: right; position: relative; list-style: none; } /* main level link */ .nav a { text-decoration: none; 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 { text-decoration: none; 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 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">&#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 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">&#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> </nav> 

Answer 1

the markup:

    <!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">

  </head>

  <body>

    <ul class="menu-wrapper" tabindex="-1">
      <li class="menu" >
        <div>Menu 1</div>
      </li>
      <ul class="sub-menu">
        <li>sub1</li>
        <li>sub2</li>
      </ul>
      <li class="menu">
        <a>Menu 2</a>
      </li>
      <ul class="sub-menu">
        <li>sub1</li>
        <li>sub2</li>
      </ul>
    </ul>
  </body>
  <script src="script.js"></script>
</html>

Javascript code:

var menuWrapper = document.getElementsByClassName('menu-wrapper')[0];
menuWrapper.addEventListener("blur", onBlur);

var elmnts = document.getElementsByClassName("menu");
for (var i = 0; i < elmnts.length; i ++){


    elmnts[i].addEventListener("click", onClick);

}
function reset(){
  for (var i = 0; i < elmnts.length; i ++){

      elmnts[i].className =  elmnts[i].className.replace(/active/g, "") //remove active class
  }  
}
function onClick(){
   console.log('focus');

    var classes = this.className.split(" ");
    if(classes.indexOf("active") == -1){
        reset();
        this.className += " active"; //active is the class name of menu the got clicked
    } else{
      this.className = this.className.replace(/active/g, "") //remove active class
    }

}
function onBlur(){
  reset();
}

Css:

.menu .sub-menu{ display: none}
.menu.active .sub-menu{display: block}

Demo: https://plnkr.co/edit/c48ibIycPRN0XC4Bx1GT

Hope this helps!