javascriptでメニューをドロップダウンしようとしています

Question

"家電製品"と "家具"の2つのドロップダウンメニューを使ってナビゲーションバーを作成しようとしています 私は働くことができますが、私の機能は一度にそのうちの一つに適用されるが、他が機能しない理由を把握することはできませんも私はそれが仕事を得ることができますと仮定。 `ここ

<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> 

は、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> 

、少なくともその始まりです。あなたは、DOM内のすべての固有のIDが必要なので、getElemenetByIdコールはそれらのものを見つけるでしょう。 idをパラメータとして追加すると、それらが分離されます。 idを使用すると、おそらくその価値よりも面倒で、メニューのようなものについては

Answer 2

、（ラインダウンとにかく）イベントが発生した場合、イベント変数がハンドラに渡され

、それはあなたがなるために必要なすべてを持っています押し要素

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

私はこれをテストしていない、と私はあなたがそれを逃した場合を除き貼り付けたときに「ショー」のためのCSS定義が存在しないとして、それはあなたが提示したコードで動作すると思ういけないを識別することができそれ。