versuchen Drop-down-Menüs mit Javascript

Question

Ich versuche, eine Nav-Leiste mit zwei Dropdown-Menüs "Geräte" und "Möbel" ich kann man zur Arbeit, aber ich habe Probleme mit der zweiten, ich bin Ich gehe davon aus, dass meine Funktion sich nur auf jeweils eine von ihnen bezieht, aber ich kann nicht herausfinden, warum die andere nicht funktioniert, und ich kann sie auch nicht zur Arbeit bringen. `

<table> 
    <tr> 
    <td><a href="home.html">Home</a> 
    <td class="dropdown"><a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Appliances</a> 
    <div class="dropdown-content" id="drop"> 
     <a href="#">Link 1</a> 
     <a href="#">Link 2</a> 
    <td><td class="dropdown"><a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Furniture</a> 
    <div class="dropdown-content" id="drop"> 
     <a href="#">Link 1</a> 
     <a href="#">Link 2</a> 
    <td><a href="bed.html">Bedding</a> 
    <td><a href="contact.html">Contact Us</a> 
    <td><a href="cart.html">Shopping Cart</a> 
    </tr> 
</table> 


<script> 

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

window.onclick = function(e) { 
    if (!e.target.matches('.dropbtn')) { 

    var dropdowns = document.getElementsByClassName("dropdown-content"); 
    for (var d = 0; d < dropdowns.length; d++) { 
     var openDropdown = dropdowns[d]; 
     if (openDropdown.classList.contains('show')) { 
     openDropdown.classList.remove('show'); 
     } 
    } 
    } 
} 
</script> 

hier ist die CSS

td a, .dropbtn { 
    display: inline-block; 
    color: #b35900; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

td a:hover, .dropdown:hover .dropbtn { 
    background-color:#ff0000; 
} 

td.dropdown { 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #ff000; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

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

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

Answer 1

<table> 
    <tr> 
    <td><a href="home.html">Home</a> 
    <td class="dropdown"><a href="javascript:void(0)" class="dropbtn" onclick="myFunction("drop1")">Appliances</a> 
<div class="dropdown-content" id="drop1"> 
    <a href="#">Link 1</a> 
    <a href="#">Link 2</a> 
<td><td class="dropdown"><a href="javascript:void(0)" class="dropbtn" onclick="myFunction("drop2")">Furniture</a> 
<div class="dropdown-content" id="drop2"> 
    <a href="#">Link 1</a> 
    <a href="#">Link 2</a> 
    <td><a href="bed.html">Bedding</a> 
    <td><a href="contact.html">Contact Us</a> 
    <td><a href="cart.html">Shopping Cart</a> 
    </tr> 
</table> 


<script> 

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

</script> 

Mindestens es ist ein Anfang. Sie benötigen eindeutige IDs für alles in Ihrem Dom, sodass der getElemenetById-Aufruf nur einen von ihnen findet. Durch Hinzufügen der ID als Parameter werden sie getrennt.

Answer 2

Für so etwas wie ein Menü id mit wahrscheinlich mehr Mühe als sein Wert (auf der ganzen Linie sowieso)

Wenn ein Ereignis eine Ereignisvariable an die Prozedur übergeben wird gefeuert wird, ist es alles, was Sie sein müssen GOTs die Lage, die gedrückte Element

function myFunction(e) { 
    e=e||event; 
    if (e.target.classList.contains("dropdown")) { 
     e.target.classList.toggle("show"); 
    } 
} 

ich habe nicht getestet, dies zu erkennen, und ich glaube nicht, dass es mit dem Code arbeiten werden Sie präsentiert habe, da es keine CSS-Definition für „Show“ ist, wenn Sie es verpaßt beim Einfügen es.