點擊它時下拉不起作用

Question

嗨我嘗試並在我的網頁中插入下拉列表，但是當我嘗試點擊時，它不顯示下面的div並將其帶到我的主頁我嘗試了一些不同的代碼與HTML和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

你有幾個問題。下面的腳本....

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

...你可以看到正在試圖用id myDropdown

問題進行切換元素1：

您有多個項目編號myDropdown。項目不應該共享一個ID。使用類和元素的唯一ID。

問題2：

你正在嘗試的目標的myDropdown元素，是不是隱藏的元素。它的父母是。 #myDropdown其中有del-menu-item類別display:block在您的CSS。你父母的內聯風格是目前隱藏的內容。因此，您的切換（如果您的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是隱藏的元素或更改JavaScript來切換是隱藏

添加.show適當的類你的CSS的父元素。