点击它时下拉不起作用
问题描述:
嗨我尝试并在我的网页中插入下拉列表,但是当我尝试点击时,它不显示下面的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:
您有多个项目编号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的父元素。
发布任何jsfiddle –
https://jsfiddle.net/sunil007/s5tvq5dv/ – sun