/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
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("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
} body, html {
height: 100%;
}
.parallax {
background-image: url('../images/firstpage.jpg');
height: 100%;
margin: 0;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
button{
background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,0));
border: none;
font-family: "Roboto";
color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
text-decoration: none;
display: block;
display: inline-block;
font-size: 26px;
z-index: 1;
float: left;
}
.fixed{
position: fixed;
}
.textbackground
{
position: absolute;
left: 100px;
top: 150px;
}
.textbackgroundbar{
overflow: hidden;
width: 800px;
height: 50px;
background: linear-gradient(to right,rgba(255,255,255,30), rgba(255,0,0,0), rgba(255,255,255,30));
}
.dropbtn {
display: block;
color: black;
padding: 10px;
font-size: 24px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.1));
min-width: 800px;
min-height: 700px;
overflow: auto;
z-index: 1;
}
.dropdown-content a {
color: red;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.show {display:block;}
.dropdown-content1 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content1 {
display: block;
}<div class="parallax">
<div class="textbackground">
<div class="textbackgroundbar">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<button onclick="myFunction()" class="dropbtn">Dropdown2</button>
</div>
</div>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Home2</a>
<a href="#about">About2</a>
<a href="#contact">Contact2</a>
</div>
</div>
</div>
这是什么问题？当我点击特定按钮时它应该下拉2个不同的东西..但它没有。 如果我点击下拉列表，它会显示有关联系的主页。如果我点击下拉2，同一家关于联系，但我希望它是home2 about2 contact2。 整个网站包含5个视差幻灯片。这是一个学校的项目，获得某种许可证，所以我真的想了解这些代码（我主要是这样做）。我理解每一个“功能”，但当我把它们全部结合起来......我只是搞砸了。 所以，请尽可能清楚。谢谢 ！ P.S：请原谅我糟糕的英语，这不是我的第一语言.. :(
答案 0 :(得分：0)
您对两个不同的div元素使用相同的ID。
ID必须是唯一的。
您可以简单地将id文本和事件对象添加到内联事件中来解决此问题：
<button onclick="myFunction('myDropdown1', event)" class="dropbtn">Dropdown</button>
<button onclick="myFunction('myDropdown2', event)" class="dropbtn">Dropdown2</button>
因此您可以更改功能以处理参数。
点击dropbtn按钮时：
点击窗口时，请务必在dropdown-content visible div和dropbtn按钮之外。
有关详情，请参阅：
var elt = element.closest(selectors);：
Element.closest（）方法返回当前元素（或当前元素本身）的最接近的祖先，它与参数中给出的选择器匹配。如果没有这样的祖先，则返回null。 - ＆gt; var result = element.matches（selectorString）;
摘录：
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction(eleId, event) {
//
// stop event propagation in order to avoid the window.onclick execution
//
event.stopPropagation();
//
// remove show class to previous shown div
//
document.querySelectorAll('.dropdown-content.show').forEach(function(ele, idx) {
ele.classList.remove("show");
});
//
// select by id using the param value
//
document.getElementById(eleId).classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
//
// if not a button and not a dropdown-content....
//
if (!event.target.matches('.dropbtn') && event.target.closest('.dropdown-content') == null) {
//
// remove show class to previous shown div
//
document.querySelectorAll('.dropdown-content.show').forEach(function(ele, idx) {
ele.classList.remove("show");
});
}
}button{
background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,0));
border: none;
font-family: "Roboto";
color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
text-decoration: none;
display: block;
display: inline-block;
font-size: 26px;
z-index: 1;
float: left;
}
.fixed{
position: fixed;
}
.textbackground {
position: absolute;
left: 100px;
top: 150px;
}
.textbackgroundbar{
overflow: hidden;
width: 800px;
height: 50px;
background: linear-gradient(to right,rgba(255,255,255,30), rgba(255,0,0,0), rgba(255,255,255,30));
}
.dropbtn {
display: block;
color: black;
padding: 10px;
font-size: 24px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.1));
min-width: 800px;
min-height: 700px;
overflow: auto;
z-index: 1;
}
.dropdown-content a {
color: red;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.show {display:block;}
.dropdown-content1 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content1 {
display: block;
}<div class="parallax">
<div class="textbackground">
<div class="textbackgroundbar">
<div class="dropdown">
<button onclick="myFunction('myDropdown1', event)" class="dropbtn">Dropdown</button>
<button onclick="myFunction('myDropdown2', event)" class="dropbtn">Dropdown2</button>
</div>
</div>
<div id="myDropdown1" class="dropdown-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
<div id="myDropdown2" class="dropdown-content">
<a href="#home">Home2</a>
<a href="#about">About2</a>
<a href="#contact">Contact2</a>
</div>
</div>
</div>