单击下拉列表时不起作用

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的元素

问题一：

您具有ID为myDropdown多个项目。 物品绝不能共享ID。 为此使用类，元素使用唯一的ID。

问题2：

您要定位的myDropdown元素不是隐藏元素。 是父母 #myDropdown del-menu-item类的#myDropdown在您的CSS中是display:block 。 父级上的内联样式是当前隐藏的样式。 因此，您的切换（如果ID已修复）将在隐藏元素内切换元素。 你永远不会看到它。

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

问题三：

您试图在这些元素上切换类“显示”。 该类在您的CSS中不存在。 您的菜单根本就没有显示，因为它具有内联显示风格：父菜单上没有。 因此，即使修复了1和2，它也无法正常工作，因为.show类.show也没做。

解：

修复代码，以便拥有唯一的ID。

重组您的元素，以便您的实际下拉div是隐藏的元素，或者更改您的JavaScript来切换隐藏的父元素

将适用于.show的适当类添加到CSS。