JavaScript下拉菜单功能出现问题

Question

The only problem I have is when you go from one drop down menu title to the next menu drop down title the first one stays open, I have attached the code pen, hopefully that's allowed.

https://codepen.io/gsxr1000/pen/yrGWEd

Edit: The below solutions are great, but they all lose the toggle ablilty of the menu, meaning the menu cant drop down and back up by clicking on the same menu item. This is very important to the functionality of the menu as in some small phones the drop downs could take up most of the screen so they will have no way to close the open dropdowns.

 function blockchain() { var element = document.getElementById("dropone"); element.classList.toggle("mystyle"); } function products() { var element = document.getElementById("droptwo"); element.classList.toggle("mystyle"); } function payments() { var element = document.getElementById("dropthree"); element.classList.toggle("mystyle"); } function services() { var element = document.getElementById("dropfore"); element.classList.toggle("mystyle"); } window.onclick = function(event) { if (!event.target.matches('.subnavbtn')) { var dropdowns = document.getElementsByClassName("subnav-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('mystyle')) { openDropdown.classList.remove('mystyle'); } } } } 

 body { max-width: 1400px; margin: 0 auto; padding: 5px; } .navbar { position: relative; max-width: 700px; width: 100%; } .navbar a { float: left; font-size: 16px; text-align: center; padding: 5px 0px; text-decoration: none; color: black; } .navbar a:nth-child(4n+1) { border-left: px solid #4caf50; } .subnav { box-sizing: border-box; border-left: 1px solid white; float: left; width: 25%; text-align: center; background-color: #4caf50; } .subnav:last-child { border-right: ; } .subnav:first-child { border-left: 1px solid #4caf50; } .subnav .subnavbtn { font-size: 16px; width: 100%; background-color: #4caf50; border: none; outline: none; color: white; padding: 10px 1px; margin: 0; z-index: 1; } .subnav-content { position: absolute; display: none; border: 1px solid #4caf50; border-top: none; max-width: 700px; width: 100%; left: 0; text-decoration: none; background-color: #f4f4f4; box-sizing: border-box; } .subnav-content a { float: left; width: 25%; box-sizing: border-box; border-left: 1px solid white; font-size: 12px; } .subnav-content a:hover { color: white; } .subnav-content a:nth-child(4n-3) { border-left: none; } .navbar a:hover, .subnav:hover .subnavbtn { font-weight: bold; background-color: #2c602e; } .mystyle { display: block; } .subnav:hover .subnav-content { box-sizing: border-box; } @media only screen and (max-width: 500px) { .subnav-content a { width: 50%; } .subnav .subnavbtn { font-size: 14px; } .subnav-content a:nth-child(2n-1) { border-left: none; } } 

 <div class="navbar"> <div class="subnav"> <button class="subnavbtn" onclick="blockchain()">Blockchain</button> <div class="subnav-content" class="drop1" id="dropone"> <a href="#company">Company</a> <a href="#team">Team</a> <a href="#careers">Careers</a> </div> </div> <div class="subnav"> <button class="subnavbtn" onclick="products()">Products</button> <div class="subnav-content" class="drop2" id="droptwo"> <a href="#bring">Bring</a> <a href="#deliver">Deliver</a> <a href="#package">Package</a> <a href="#express">Express</a> <a href="#bring">Bring</a> <a href="#deliver">Deliver</a> <a href="#package">Package</a> <a href="#bring">Bring</a> <a href="#deliver">Deliver</a> <a href="#package">Package</a> <a href="#express">Express</a> <a href="#bring">Bring</a> <a href="#deliver">Deliver</a> <a href="#package">Package</a> </div> </div> <div class="subnav"> <button class="subnavbtn" onclick="payments()">Payments</button> <div class="subnav-content" class="drop3" id="dropthree"> <a href="#link1">Link 1</a> <a href="#link2">Link 2</a> <a href="#link3">Link 3</a> <a href="#link4">Link 4</a> </div> </div> <div class="subnav"> <button class="subnavbtn" onclick="services()">Services</button> <div class="subnav-content" class="drop4" id="dropfore"> <a href="#bring">Bring</a> <a href="#deliver">Deliver</a> <a href="#package">Package</a> <a href="#express">Express</a> </div> </div> </div> 

Answer 1

1. Create a function to close all navigation items;
2. Call this function when navigation items are clicked or document are clicked.

 function blockchain() { var element = document.getElementById("dropone"); if (element.classList.contains("mystyle")) { element.classList.remove("mystyle"); } else { closeAll(); element.classList.add("mystyle"); } } function products() { var element = document.getElementById("droptwo"); if (element.classList.contains("mystyle")) { element.classList.remove("mystyle"); } else { closeAll(); element.classList.add("mystyle"); } } function payments() { var element = document.getElementById("dropthree"); if (element.classList.contains("mystyle")) { element.classList.remove("mystyle"); } else { closeAll(); element.classList.add("mystyle"); } } function services() { var element = document.getElementById("dropfore"); if (element.classList.contains("mystyle")) { element.classList.remove("mystyle"); } else { closeAll(); element.classList.add("mystyle"); } } window.onclick = function(event) { closeAll(event); } function closeAll(event = null) { if (!event || !event.target.matches('.subnavbtn')) { var dropdowns = document.getElementsByClassName("subnav-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('mystyle')) { openDropdown.classList.remove('mystyle'); } } } } 

 body { max-width: 1400px; margin: 0 auto; padding: 5px; } .navbar{ position: relative; max-width: 700px; width: 100%; } .navbar a { float: left; font-size: 16px; text-align: center; padding: 5px 0px; text-decoration: none; color: black; } .navbar a:nth-child(4n+1) { border-left: px solid #4caf50; } .subnav { box-sizing: border-box; border-left: 1px solid white; float: left; width: 25%; text-align: center; background-color: #4caf50; } .subnav:last-child { border-right: ; } .subnav:first-child { border-left: 1px solid #4caf50; } .subnav .subnavbtn { font-size: 16px; width: 100%; background-color: #4caf50; border: none; outline: none; color: white; padding: 10px 1px; margin: 0; z-index: 1; } .subnav-content { position: absolute; display: none; border: 1px solid #4caf50; border-top: none; max-width: 700px; width: 100%; left: 0; text-decoration: none; background-color: #f4f4f4; box-sizing: border-box; } .subnav-content a { float: left; width: 25%; box-sizing: border-box; border-left: 1px solid white; font-size: 12px; } .subnav-content a:hover { color:white; } .subnav-content a:nth-child(4n-3) { border-left: none; } .navbar a:hover, .subnav:hover .subnavbtn { font-weight: bold; background-color: #2c602e; } .mystyle { display:block; } .subnav:hover .subnav-content{ box-sizing: border-box; } @media only screen and (max-width: 500px) { .subnav-content a { width: 50%; } .subnav .subnavbtn { font-size: 14px; } .subnav-content a:nth-child(2n-1) { border-left: none; } } 

 <div class="navbar"> <div class="subnav"> <button class="subnavbtn" onclick="blockchain()">Blockchain</button> <div class="subnav-content" class="drop1" id="dropone"> <a href="#company">Company</a> <a href="#team">Team</a> <a href="#careers">Careers</a> </div> </div> <div class="subnav"> <button class="subnavbtn" onclick="products()">Products</button> <div class="subnav-content" class="drop2" id="droptwo"> <a href="#bring">Bring</a> <a href="#deliver">Deliver</a> <a href="#package">Package</a> <a href="#express">Express</a> <a href="#bring">Bring</a> <a href="#deliver">Deliver</a> <a href="#package">Package</a> <a href="#bring">Bring</a> <a href="#deliver">Deliver</a> <a href="#package">Package</a> <a href="#express">Express</a> <a href="#bring">Bring</a> <a href="#deliver">Deliver</a> <a href="#package">Package</a> </div> </div> <div class="subnav"> <button class="subnavbtn" onclick="payments()">Payments</button> <div class="subnav-content" class="drop3" id="dropthree"> <a href="#link1">Link 1</a> <a href="#link2">Link 2</a> <a href="#link3">Link 3</a> <a href="#link4">Link 4</a> </div> </div> <div class="subnav"> <button class="subnavbtn" onclick="services()">Services</button> <div class="subnav-content" class="drop4" id="dropfore"> <a href="#bring">Bring</a> <a href="#deliver">Deliver</a> <a href="#package">Package</a> <a href="#express">Express</a> </div> </div> </div> 

More simply practice with jQuery:

 $('.subnav').on('click', function() { $('.subnav').not(this).find('.subnav-content').removeClass('mystyle'); $(this).find('.subnav-content').toggleClass('mystyle'); }); $(document).on('click', function(e) { if (!$(e.target).hasClass('subnavbtn')) { $('.subnav-content').removeClass('mystyle'); } }); 

 body { max-width: 1400px; margin: 0 auto; padding: 5px; } .navbar{ position: relative; max-width: 700px; width: 100%; } .navbar a { float: left; font-size: 16px; text-align: center; padding: 5px 0px; text-decoration: none; color: black; } .navbar a:nth-child(4n+1) { border-left: px solid #4caf50; } .subnav { box-sizing: border-box; border-left: 1px solid white; float: left; width: 25%; text-align: center; background-color: #4caf50; } .subnav:last-child { border-right: ; } .subnav:first-child { border-left: 1px solid #4caf50; } .subnav .subnavbtn { font-size: 16px; width: 100%; background-color: #4caf50; border: none; outline: none; color: white; padding: 10px 1px; margin: 0; z-index: 1; } .subnav-content { position: absolute; display: none; border: 1px solid #4caf50; border-top: none; max-width: 700px; width: 100%; left: 0; text-decoration: none; background-color: #f4f4f4; box-sizing: border-box; } .subnav-content a { float: left; width: 25%; box-sizing: border-box; border-left: 1px solid white; font-size: 12px; } .subnav-content a:hover { color:white; } .subnav-content a:nth-child(4n-3) { border-left: none; } .navbar a:hover, .subnav:hover .subnavbtn { font-weight: bold; background-color: #2c602e; } .mystyle { display:block; } .subnav:hover .subnav-content{ box-sizing: border-box; } @media only screen and (max-width: 500px) { .subnav-content a { width: 50%; } .subnav .subnavbtn { font-size: 14px; } .subnav-content a:nth-child(2n-1) { border-left: none; } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="navbar"> <div class="subnav"> <button class="subnavbtn">Blockchain</button> <div class="subnav-content" class="drop1" id="dropone"> <a href="#company">Company</a> <a href="#team">Team</a> <a href="#careers">Careers</a> </div> </div> <div class="subnav"> <button class="subnavbtn">Products</button> <div class="subnav-content" class="drop2" id="droptwo"> <a href="#bring">Bring</a> <a href="#deliver">Deliver</a> <a href="#package">Package</a> <a href="#express">Express</a> <a href="#bring">Bring</a> <a href="#deliver">Deliver</a> <a href="#package">Package</a> <a href="#bring">Bring</a> <a href="#deliver">Deliver</a> <a href="#package">Package</a> <a href="#express">Express</a> <a href="#bring">Bring</a> <a href="#deliver">Deliver</a> <a href="#package">Package</a> </div> </div> <div class="subnav"> <button class="subnavbtn">Payments</button> <div class="subnav-content" class="drop3" id="dropthree"> <a href="#link1">Link 1</a> <a href="#link2">Link 2</a> <a href="#link3">Link 3</a> <a href="#link4">Link 4</a> </div> </div> <div class="subnav"> <button class="subnavbtn">Services</button> <div class="subnav-content" class="drop4" id="dropfore"> <a href="#bring">Bring</a> <a href="#deliver">Deliver</a> <a href="#package">Package</a> <a href="#express">Express</a> </div> </div> </div> 

Answer 2

A css only solution would make the problem much easier.

The :focus selector selects an element if it is the last one that was clicked.

The :focus-within does the same but also if any child has focus.

The + selects the next sibling, which in your case is a div with the .subnav-content

 /* * When the button is focused this makes it click-through. * This hast the efect that when the user clicks the button again the click event * goes through the button and 'hits' the element behind it and so the button looses focus. */ .subnavbtn:focus, .subnavbtn:focus-within { pointer-events: none; } .subnavbtn:focus + .subnav-content, .subnavbtn:focus-within + .subnav-content { display: block; } body { max-width: 1400px; margin: 0 auto; padding: 5px; } .navbar{ position: relative; max-width: 700px; width: 100%; } .navbar a { float: left; font-size: 16px; text-align: center; padding: 5px 0px; text-decoration: none; color: black; } .navbar a:nth-child(4n+1) { border-left: px solid #4caf50; } .subnav { box-sizing: border-box; border-left: 1px solid white; float: left; width: 25%; text-align: center; background-color: #4caf50; } .subnav:last-child { border-right: ; } .subnav:first-child { border-left: 1px solid #4caf50; } .subnav .subnavbtn { font-size: 16px; width: 100%; background-color: #4caf50; border: none; outline: none; color: white; padding: 10px 1px; margin: 0; z-index: 1; } .subnav-content { position: absolute; display: none; border: 1px solid #4caf50; border-top: none; max-width: 700px; width: 100%; left: 0; text-decoration: none; background-color: #f4f4f4; box-sizing: border-box; } .subnav-content a { float: left; width: 25%; box-sizing: border-box; border-left: 1px solid white; font-size: 12px; } .subnav-content a:hover { color:white; } .subnav-content a:nth-child(4n-3) { border-left: none; } .navbar a:hover, .subnav:hover .subnavbtn { font-weight: bold; background-color: #2c602e; } .subnav:hover .subnav-content{ box-sizing: border-box; } @media only screen and (max-width: 500px) { .subnav-content a { width: 50%; } .subnav .subnavbtn { font-size: 14px; } .subnav-content a:nth-child(2n-1) { border-left: none; } } 

 <div class="navbar"> <div class="subnav"> <button class="subnavbtn">Blockchain</button> <div class="subnav-content" class="drop1" id="dropone"> <a href="#company">Company</a> <a href="#team">Team</a> <a href="#careers">Careers</a> </div> </div> <div class="subnav"> <button class="subnavbtn">Products</button> <div class="subnav-content" class="drop2" id="droptwo"> <a href="#bring">Bring</a> <a href="#deliver">Deliver</a> <a href="#package">Package</a> <a href="#express">Express</a> <a href="#bring">Bring</a> <a href="#deliver">Deliver</a> <a href="#package">Package</a> <a href="#bring">Bring</a> <a href="#deliver">Deliver</a> <a href="#package">Package</a> <a href="#express">Express</a> <a href="#bring">Bring</a> <a href="#deliver">Deliver</a> <a href="#package">Package</a> </div> </div> <div class="subnav"> <button class="subnavbtn">Payments</button> <div class="subnav-content" class="drop3" id="dropthree"> <a href="#link1">Link 1</a> <a href="#link2">Link 2</a> <a href="#link3">Link 3</a> <a href="#link4">Link 4</a> </div> </div> <div class="subnav"> <button class="subnavbtn">Services</button> <div class="subnav-content" class="drop4" id="dropfore"> <a href="#bring">Bring</a> <a href="#deliver">Deliver</a> <a href="#package">Package</a> <a href="#express">Express</a> </div> </div> </div>