您好,我尝试在我的网页中插入一个下拉菜单,但是当我尝试点击时,它没有显示下面的 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="#">×</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="#">×</a>
</div>
</div>
</div>
</div>
</section>
最佳答案
您有几个问题。以下脚本....
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
...如您所见,它正在尝试切换 ID 为 myDropdown
问题 1:
您有多个 ID 为 myDropdown
的元素。元素永远不应该共享一个 ID。为此使用类,并为元素使用唯一 ID。
问题 2:
您尝试定位的 myDropdown
元素不是隐藏元素。它的 parent 是。 #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 中不存在该类。您的菜单根本没有显示,因为它具有内联样式 display:none 在其父项上。所以即使修复了 1 和 2,它也不会工作,因为 .show
类什么都不做。
解决方案:
修复您的代码,使您拥有唯一的 ID。
重组您的元素,以便您的实际下拉 div 是隐藏元素,或者更改您的 javascript 以切换隐藏的父元素
为 .show
添加适当的类到您的 CSS。
关于javascript - 单击下拉菜单时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39488218/