ドロップダウンが動作していない

Question

こんにちは私はウェブページにドロップダウンを挿入しようとしましたが、クリックしようとすると下のdivが表示されず、メインページに移動しました。 cssはw3schoolsのjavascriptリファレンスも使用しましたが動作しませんでした。この問題で私を助けてください。

スニペット

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

 
// Close the dropdown if the user clicks outside of it 
 
window.onclick = function(event) { 
 
    if (!event.target.matches('.dropbtn')) { 
 

 
     var dropdowns = document.getElementsByClassName("del-menu-item"); 
 
     var i; 
 
     for (i = 0; i < dropdowns.length; i++) { 
 
      var openDropdown = dropdowns[i]; 
 
      if (openDropdown.classList.contains('show')) { 
 
       openDropdown.classList.remove('show'); 
 
      } 
 
     } 
 
    } 
 
}

#catering .container { 
 
     text-align: left; 
 
     box-sizing: border-box; 
 
    } 
 
    #catering .deliver { 
 
     border-bottom: 1px solid #d6dbdf; 
 
     margin: 0 20px; 
 
    } 
 
    #catering .delivery-menu { 
 
     display: block; 
 
     position: relative; 
 
     width: 100%; 
 
     padding: 36px 52px 28px 0; 
 
     font-family: "DINCondensedBold", Verdana, Arial, sans-serif; 
 
     text-transform: uppercase; 
 
     font-weight: normal; 
 
     font-size: 30px; 
 
     letter-spacing: 0.05em; 
 
     color: #253037; 
 
     text-decoration: none !important; 
 
    } 
 
    #catering .del-menu-item { 
 
     display: block; 
 
     position: relative; 
 
     width: 100%; 
 
     padding: 28px; 
 
     min-height: 135px; 
 
     border-top: 1px solid #d6dbdf; 
 
    } 
 
    #catering .del-menu-item h3 { 
 
     font-size: 30px; 
 
     margin-bottom: 0; 
 
     padding-right: 200px; 
 
    } 
 
    #catering .del-menu-item p { 
 
     padding-right: 200px; 
 
    } 
 
    #catering .del-menu-item .pull-right { 
 
     position: absolute; 
 
     top: 20px; 
 
     right: 0; 
 
    } 
 
    #catering .del-menu-item .added-item { 
 
     display: none; 
 
     margin-top: 35px; 
 
     padding: 30px; 
 
     background: #d6dbdf; 
 
    } 
 
    #catering .del-menu-item .added-item .remove { 
 
     display: block; 
 
     float: right; 
 
     width: 32px; 
 
     height: 32px; 
 
     line-height: 30px; 
 
     text-align: center; 
 
     color: #253037; 
 
     border: 1px solid #253037; 
 
     border-radius: 99px; 
 
     font-family: times; 
 
     text-decoration: none !important; 
 
    }

<section id="catering"> 
 
    <div class="container" style="display: block;"> 
 
    <div class="deliver"> 
 
     <a onclick = "myFunction()" class="delivery-menu" href="#">Main</a> 
 
     <div class="del-menu-con" style="display: none;"> 
 
      <div id = "myDropdown" class="del-menu-item"> 
 
       <h3>Lobster Roll (380 cal) <span>$17</span></h3> 
 
       <p>¼ lb of lobster atop a buttered, toasted New-England style split-top bun with a swipe of mayo, a sprinkle of lemon butter and a dash of our secret spices.</p> 
 
       <div class="pull-right"> 
 
        Qty<br> 
 
        <input type="text"><a class="add">Add</a> 
 
       </div> 
 
       <div class="added-item"> 
 
        <span></span> <a class="remove" href="#">&times;</a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="deliver"> 
 
     <a onclick = "myFunction()" class="delivery-menu" href="#">Soup</a> 
 
     <div class="del-menu-con" style="display: none;"> 
 
      <div id = "myDropdown" class="del-menu-item"> 
 
       <h3>Lobster Roll (380 cal) <span>$17</span></h3> 
 
       <p>¼ lb of lobster atop a buttered, toasted New-England style split-top bun with a swipe of mayo, a sprinkle of lemon butter and a dash of our secret spices.</p> 
 
       <div class="pull-right"> 
 
        Qty<br> 
 
        <input type="text"><a class="add">Add</a> 
 
       </div> 
 
       <div class="added-item"> 
 
        <span></span> <a class="remove" href="#">&times;</a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section>

Answer 1

あなたはカップルの問題を抱えています。 ID myDropdown

問題1と要素を切り替えしようとしているあなたが見ることができるように、次のスクリプト....

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

...：

あなたが持つ複数のアイテムを持っていますid myDropdown。アイテムは決してIDを共有してはいけません。それにはクラスを使用し、要素には一意のIDを使用します。

問題2：

あなたがターゲットにしようとしているmyDropdown要素は、隠された要素ではありません。それは親です。 #myDropdownはdel-menu-itemです。あなたのCSSではdisplay:blockです。親のインラインスタイルは、現時点でそれを隠しているものです。したがって、あなたのトグル（あなたのIDが修復されている場合）は隠された要素の中の要素をトグルするでしょう。あなたは決してそれを見ないだろう。

<div class="del-menu-con" style="display: none;"> 
    <div id = "myDropdown" class="del-menu-item"> 
    ... 
    </div> 
</div> 

問題3：あなたはこれらの要素のクラスのショー」を切り替えるしようとしている

。そのクラスはあなたのCSSには存在しません。インラインスタイルの表示があるため、メニューは表示されません。親には表示されません。したがって、修復された1と2の場合でも、クラス.showは何もしないので機能しません。

ソリューション：

あなたが固有のIDを持っているので、あなたのコードを修復します。

再構築あなたの要素のいずれかの実際のドロップダウンのdivが隠し要素であるか

があなたのCSSに .showのための適切なクラスを追加隠されている親要素を切り替えるには、あなたのjavascriptを変更するようにします。