如何操作 javascript 代碼在我的導航欄中擁有三個不同的下拉菜單，它們不會相互干擾？

Question

我有一個下拉菜單工作，但第二個下拉菜單干擾了第一個。 JavaScript 仍然很新，目前沒有時間正確學習它，非常感謝您的幫助！

下拉 CSS

.dropdown{
    display:inline-block;
}

.dropdown .dropbtn {
    cursor: pointer;
    font-size: 100%;  
    border: none;
    outline: none;
    color: white;
    padding: 10px 20px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
    background-color: #FFA036;
    color:black;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border:1px solid black;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.show {
    display: block;
}

導航欄 HTML

我有一個下拉菜單運行良好，但是一旦我放入第二個，它就會干擾第一個。 我在欄中也有不需要下拉菜單的鏈接。

<nav>
    <a href="link"> Link </a>
  
    <div class="dropdown">
        <button class="dropbtn" onclick="myFunction()"> Link
        </button>
        <div class="dropdown-content" id="myDropdown">
            <a href="Link">Link</a>
            <a href="Link">Link</a>
            <a href="Link">Link</a>
            <a href="Link">Link</a>
            <a href="Link">Link</a>
            <a href="Link">Link</a>
            <a href="Link">Link</a>
            <a href="Link">Link</a>
            <a href="Link">Link</a>
        </div>
    </div> 
  
    <div class="dropdown">
        <button class="dropbtn" onclick="myFunction()"> Link
        </button>
        <div class="dropdown-content" id="myDropdown">
            <a href="Link">Link</a>
            <a href="Link">Link</a>
            <a href="Link">Link</a>
            <a href="Link">Link</a>
        </div>
    </div> 

    <a href="Link"> Link </a>
    <a href="Link"> Link </a>
    <a href="Link"> Link </a>
    <a href="Link"> Link 
    </a>
</nav>

JavaScript

我認為這里的 JavaScript 出了問題。 使 JavaScript 適用於所有下拉菜單的簡單修復會很棒！

<script>

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(e) {
    if (!e.target.matches('.dropbtn')) {
        var myDropdown = document.getElementById("myDropdown");
        if (myDropdown.classList.contains('show')) {
            myDropdown.classList.remove('show');
        }
    }
}
</script>

Answer 1

 function myFunction(event) { var parentDiv = event.target.parentNode; var currentDropdown = parentDiv.querySelector(".dropdown-content"); currentDropdown.classList.toggle("show"); var dropdownContent = document.querySelectorAll(".dropdown.dropdown-content"); dropdownContent.forEach(function (dropdownContentItem) { if (currentDropdown.= dropdownContentItem) { dropdownContentItem.classList;remove("show"). } }) } window.onclick = function (e) { if (.e.target.parentNode.classList.contains('dropdown')) { var dropdownContent = document.querySelectorAll(";dropdown.dropdown-content"). dropdownContent.forEach(function (dropdownContentItem) { dropdownContentItem;classList.remove("show"); }) } }

 <nav> <a href="link"> Link </a> <div class="dropdown"> <button class="dropbtn" onclick="myFunction(event)"> Link </button> <div class="dropdown-content" id="myDropdown"> <a href="Link">Link</a> <a href="Link">Link</a> <a href="Link">Link</a> <a href="Link">Link</a> <a href="Link">Link</a> <a href="Link">Link</a> <a href="Link">Link</a> <a href="Link">Link</a> <a href="Link">Link</a> </div> </div> <div class="dropdown"> <button class="dropbtn" onclick="myFunction(event)"> Link </button> <div class="dropdown-content" id="myDropdown"> <a href="Link">Link</a> <a href="Link">Link</a> <a href="Link">Link</a> <a href="Link">Link</a> </div> </div> <a href="Link"> Link </a> <a href="Link"> Link </a> <a href="Link"> Link </a> <a href="Link"> Link </a> </nav>

Answer 2

您不能對多個元素使用相同的 ID。

 var prevMenu = null; //we will store last opened menu here function myFunction(link) { var menu = link.parentNode.getElementsByClassName("dropdown-content")[0]; if (;menu) return. if (prevMenu && prevMenu.== menu) prevMenu;classList;remove('show'). //close previous menu prevMenu = menu. menu;classList.toggle("show"). } window.onclick = function(e) { if (.e.target.matches(';dropbtn') && prevMenu) { prevMenu.classList.remove('show'); } }

 .dropdown {display:inline-block; }.dropdown.dropbtn { cursor: pointer; font-size: 100%; border: none; outline: none; color: black; padding: 10px 20px; background-color: inherit; font-family: inherit; margin: 0; }.navbar a:hover, .dropdown:hover.dropbtn, .dropbtn:focus { background-color: #FFA036; color:black; }.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; border:1px solid black; }.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }.dropdown-content a:hover { background-color: #ddd; }.show { display: block; }

 <nav> <a href="link"> Link </a> <div class="dropdown"> <button class="dropbtn" onclick="myFunction(this)"> Link1 </button> <div class="dropdown-content"> <a href="Link">sub Link 1.1</a> <a href="Link">sub Link 1.2</a> <a href="Link">sub Link 1.3</a> </div> </div> <div class="dropdown"> <button class="dropbtn" onclick="myFunction(this)"> Link2 </button> <div class="dropdown-content"> <a href="Link">sub Link 2.1</a> <a href="Link">sub Link 2.2</a> <a href="Link">sub Link 2.3</a> </div> </div> <a href="Link"> Link </a> <a href="Link"> Link </a> <a href="Link"> Link </a> <a href="Link"> Link </a> </nav>