Javascript 中的导航栏下拉按钮调用第一个按钮

Question

在我的导航栏中，第一个按钮可以工作，但下一个按钮不起作用。

后续按钮仅调用第一个按钮。我还想让我的导航响应汉堡包图标。我无法感知可能的解决方案。

我知道 Javascript 仅调用第一个按钮，我想Javascript按类调用后续按钮。

我不知道如何解决这个问题。我浏览的一些解决方案，只有按钮，但我希望按钮在导航栏中可单击。和其他一些解决方案，在导航栏上有下拉菜单，但单击菜单本身时它们不会关闭，但在窗口中单击时会关闭

Answer 1

注1：删除重复的ID。多个元素切勿具有相同的 ID。注2：使用 时document.getElementById("myDropdown")，只会返回一个元素（&第一个元素）。注3：我们可以使用类来代替“ID”。请检查下面的javascript代码以显示相应的下拉列表。//JSfunction myFunction(event) {&nbsp; var clickedElement = event.target;&nbsp; console.log(clickedElement);&nbsp; if (clickedElement.nodeName != 'BUTTON') {&nbsp; &nbsp; clickedElement = clickedElement.parentElement;&nbsp; }&nbsp; var dropdownElement = clickedElement.nextElementSibling;&nbsp; dropdownElement.classList.add('tempClass'); //adding tempclass to avoid this in below loop&nbsp; var allOtherDropdowns = document.getElementsByClassName('dropdown-content');&nbsp; //close all other dropdowns&nbsp; for (var i = 0; i < allOtherDropdowns.length; i++) {&nbsp; &nbsp; if (!allOtherDropdowns[i].classList.contains('tempClass')) {&nbsp; &nbsp; &nbsp; allOtherDropdowns[i].classList.remove('show');&nbsp; &nbsp; }&nbsp; }&nbsp; dropdownElement.classList.toggle("show");&nbsp; dropdownElement.classList.remove('tempClass'); //removing the temp class here&nbsp;}//HTML<div class="dropdown">&nbsp; &nbsp; &nbsp; <button class="dropbtn" onclick="myFunction(event)">Upgrade 2&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fa fa-caret-down"></i>&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; <div class="dropdown-content">&nbsp; &nbsp; &nbsp; &nbsp; <a href="#" onclick="myFunc();">item 1</a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">item 2</a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">item 3</a>&nbsp; &nbsp; &nbsp; </div></div>function myFunc() {&nbsp; alert('You clicked a submenu item')}/* When the user clicks on the button,&nbsp;toggle between hiding and showing the dropdown content */function myFunction(event) {&nbsp; var clickedElement = event.target;&nbsp; console.log(clickedElement);&nbsp; if (clickedElement.nodeName != 'BUTTON') {&nbsp; &nbsp; clickedElement = clickedElement.parentElement;&nbsp; }&nbsp; var dropdownElement = clickedElement.nextElementSibling;&nbsp; dropdownElement.classList.add('tempClass'); //adding tempclass to avoid this in below loop&nbsp; var allOtherDropdowns = document.getElementsByClassName('dropdown-content');&nbsp; //close all other dropdowns&nbsp; for (var i = 0; i < allOtherDropdowns.length; i++) {&nbsp; &nbsp; if (!allOtherDropdowns[i].classList.contains('tempClass')) {&nbsp; &nbsp; &nbsp; allOtherDropdowns[i].classList.remove('show');&nbsp; &nbsp; }&nbsp; }&nbsp; dropdownElement.classList.toggle("show");&nbsp; dropdownElement.classList.remove('tempClass'); //removing the temp class here}// Close the dropdown if the user clicks outside of itwindow.onclick = function(e) {&nbsp; if (!e.target.matches('.dropbtn')) {&nbsp; &nbsp; var allDropdowns = document.getElementsByClassName('dropdown-content');&nbsp; &nbsp; //close all other dropdowns&nbsp; &nbsp; for (var i = 0; i < allDropdowns.length; i++) {&nbsp; &nbsp; &nbsp; allDropdowns[i].classList.remove('show');&nbsp; &nbsp; }&nbsp; }}.navbar {&nbsp; overflow: hidden;&nbsp; background-color: #333;&nbsp; font-family: Arial, Helvetica, sans-serif;}.navbar a {&nbsp; float: left;&nbsp; font-size: 16px;&nbsp; color: white;&nbsp; text-align: center;&nbsp; padding: 14px 16px;&nbsp; text-decoration: none;}.dropdown {&nbsp; float: left;&nbsp; overflow: hidden;}.dropdown .dropbtn {&nbsp; cursor: pointer;&nbsp; font-size: 16px;&nbsp; border: none;&nbsp; outline: none;&nbsp; color: white;&nbsp; padding: 14px 16px;&nbsp; background-color: inherit;&nbsp; font-family: inherit;&nbsp; margin: 0;}.navbar a:hover,.dropdown:hover .dropbtn,.dropbtn:focus {&nbsp; background-color: red;}.dropdown-content {&nbsp; display: none;&nbsp; position: absolute;&nbsp; background-color: #f9f9f9;&nbsp; min-width: 160px;&nbsp; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);&nbsp; z-index: 1;}.dropdown-content a {&nbsp; float: none;&nbsp; color: black;&nbsp; padding: 12px 16px;&nbsp; text-decoration: none;&nbsp; display: block;&nbsp; text-align: left;}.dropdown-content a:hover {&nbsp; background-color: #ddd;}.show {&nbsp; display: block;}<!DOCTYPE html><html><head>&nbsp; <meta name="viewport" content="width=device-width, initial-scale=1">&nbsp; <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></head><body>&nbsp; <div class="navbar">&nbsp; &nbsp; <div class="dropdown">&nbsp; &nbsp; &nbsp; <button class="dropbtn" onclick="myFunction(event)">Upgrade 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fa fa-caret-down"></i>&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; <div class="dropdown-content">&nbsp; &nbsp; &nbsp; &nbsp; <a href="#" onclick="myFunc();">item 1</a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">item 2</a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">item 3</a>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="dropdown">&nbsp; &nbsp; &nbsp; <button class="dropbtn" onclick="myFunction(event)">Upgrade 2&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fa fa-caret-down"></i>&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; <div class="dropdown-content">&nbsp; &nbsp; &nbsp; &nbsp; <a href="#" onclick="myFunc();">item 1</a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">item 2</a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">item 3</a>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="dropdown">&nbsp; &nbsp; &nbsp; <button class="dropbtn" onclick="myFunction(event)">Upgrade 3&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fa fa-caret-down"></i>&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; <div class="dropdown-content">&nbsp; &nbsp; &nbsp; &nbsp; <a href="#" onclick="myFunc();">item 1</a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">item 2</a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">item 3</a>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <h3>Dropdown Menu inside a Navigation Bar</h3>&nbsp; <p>Click on the "Dropdown" link to see the dropdown menu.</p></body></html>

Answer 2

&nbsp; function myFunction() {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("myDropdown").classList.toggle("show");&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("myDropdown1").classList.remove("show");&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("myDropdown2").classList.remove("show");&nbsp; &nbsp; }&nbsp; &nbsp; function myFunction1() {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("myDropdown1").classList.toggle("show");&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("myDropdown").classList.remove("show");&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("myDropdown2").classList.remove("show");&nbsp; &nbsp; }&nbsp; &nbsp; function myFunction2() {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("myDropdown2").classList.toggle("show");&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("myDropdown1").classList.remove("show");&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("myDropdown").classList.remove("show");&nbsp; &nbsp; }&nbsp; &nbsp; // Close the dropdown if the user clicks outside of it&nbsp; &nbsp; window.onclick = function(e) {&nbsp; &nbsp; &nbsp; &nbsp; if (!e.target.matches('.dropbtn')) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var myDropdown = document.getElementById("myDropdown");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var myDropdown1 = document.getElementById("myDropdown1");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var myDropdown2 = document.getElementById("myDropdown2");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (myDropdown.classList.contains('show')) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; myDropdown.classList.remove('show');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (myDropdown1.classList.contains('show')) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; myDropdown1.classList.remove('show');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (myDropdown2.classList.contains('show')) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; myDropdown2.classList.remove('show');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }我认为相同的 Id 是问题所在