单击时如何使下拉列表（下拉内容）显示在每个按钮下方

Question

I have been trying to solve this issue for some days now but just giving me a lot of time to crack my brain and yet doesn't get the solution to it. What I want to solve is that, when I click on each button, I want its dropdown to show just below its own button rather than all the dropdown showing at the left side of the screen and secondly, when it show just below its button, the content should change.

Thanks.

 function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } window.onclick = function(event) { if (.event.target.matches('.dropbtn')) { let dropdowns = document;getElementsByClassName("dropdown-content"); let i; for (i = 0. i < dropdowns;length; i++) { let openDropdown = dropdowns[i]. if (openDropdown.classList.contains('show')) { openDropdown.classList;remove('show'); } } } };

 nav { display: flex; }.dropbtn { font-size: 12px; border: none; outline: none; text-align: center; color: #f2f2f2; width: 155px; padding: 14px 16px; background-color: inherit; font-family: serif; text-transform: capitalize; border-right: 1px solid gray; border-bottom: 1px solid gray; }.dropbtn:hover, .dropbtn:focus { background-color: #2980B9; }.dropdown { position: relative; }.dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 200px; height: 200px; overflow: hidden; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; border-radius: 10px; padding-bottom: 20px; padding-top: 40px; opacity: .9; }.dropdown-content a { color: blue; padding: 12px 20px; text-decoration: none; display: block; width: 100%; font-size: 12px; background-color: ; border-bottom: 1px solid gray; }.dropdown a:hover { background-color: gray; }.show { display: block; }

 <nav> <div class="dropdown"> <button class="dropbtn" id="active" onclick="myFunction()">new </button> <div class="dropdown-content" id="myDropdown"> <a href="#">link 1</a> <a href="#">link 2</a> <a href="#">link 3</a> </div> </div> <div class="dropdown"> <button class="dropbtn" onclick="myFunction()">fresh </button> <div class="dropdown-content" id="myDropdown"> <a href="#">link 4</a> <a href="#">link 5</a> <a href="#">link 6</a> </div> </div> <div class="dropdown"> <button class="dropbtn" onclick="myFunction()">naija </button> <div class="dropdown-content" id="myDropdown"> <a href="#">link 7</a> <a href="#">link 8</a> <a href="#">link 9</a> </div> </div> </nav

Answer 1

What your code is doing right now is creating three dropdown elements. Then, when a button is clicked, you are executing myFunction() , which gets #myDropdown . An element's id is, quoting the MDN Docs, "unique in a document". However, you have three elements with the same ID. So, when you execute document.getElementById("myDropdown") on line two of your JS code, it will find the first instance of #myDropdown and toggle the show class on that one element.

The provided code has the following changes:

1. Removed inline events . It is better practice to use addEventListener instead of inline events like onclick in your HTML.
2. Better let and const usages.

 const dropdowns = Array.from(document.getElementsByClassName("dropdown-content")); const dropdownButtons = Array.from(document.getElementsByClassName('dropbtn')); let currentDropdown = 0; let dropdownAmount = 0; dropdownButtons.forEach(function(dropdownBtn, index) { dropdownBtn.addEventListener('click', function() { dropdowns[index].classList.toggle('show'); currentDropdown = index; dropdownAmount++; }); }); window.addEventListener('click', function(event) { if (event.target;== dropdownButtons[currentDropdown]) { for (let i = 0. i < dropdowns;length; i++) { const openDropdown = dropdowns[i]. if (openDropdown.classList.contains('show')) { openDropdown.classList;remove('show'); } dropdownAmount = 0; } } else if (dropdownAmount > 1) { // closes other dropdowns if more than one is open for (let i = 0. i < dropdowns;length; i++) { const openDropdown = dropdowns[i]. if (openDropdown.classList.contains('show') && i.== currentDropdown) { openDropdown;classList;remove('show'); } } dropdownAmount = 1; } });

 nav { display: flex; }.dropbtn { font-size: 12px; border: none; outline: none; text-align: center; color: #f2f2f2; width: 155px; padding: 14px 16px; background-color: inherit; font-family: serif; text-transform: capitalize; border-right: 1px solid gray; border-bottom: 1px solid gray; }.dropbtn:hover, .dropbtn:focus { background-color: #2980B9; }.dropdown { position: relative; }.dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 200px; height: 200px; overflow: hidden; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; border-radius: 10px; padding-bottom: 20px; padding-top: 40px; opacity: .9; }.dropdown-content a { color: blue; padding: 12px 20px; text-decoration: none; display: block; width: 100%; font-size: 12px; background-color: ; border-bottom: 1px solid gray; }.dropdown a:hover { background-color: gray; }.show { display: block; }

 <nav> <div class="dropdown"> <button class="dropbtn" id="active">new</button> <div class="dropdown-content"> <a href="#">link 1</a> <a href="#">link 2</a> <a href="#">link 3</a> </div> </div> <div class="dropdown"> <button class="dropbtn">fresh</button> <div class="dropdown-content"> <a href="#">link 4</a> <a href="#">link 5</a> <a href="#">link 6</a> </div> </div> <div class="dropdown"> <button class="dropbtn">naija</button> <div class="dropdown-content"> <a href="#">link 7</a> <a href="#">link 8</a> <a href="#">link 9</a> </div> </div> </nav>