菜单下拉上下文
菜单下拉上下文
提问于 2017-04-08 21:04:10
/* 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个视差幻灯片。这是一个学校的项目，为了获得某种许可，所以我真的在尝试去理解那些代码(而且大多数情况下我是这么做的)。我理解每一个“功能”，但当我把它们结合起来的时候.我只是搞砸了。所以，请尽量说清楚。谢谢！对不起，这不是我的第一语言。:(
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-04-08 21:23:56
您对两个不同的div元素使用相同的ID。
ID必须是唯一的。
您可以简单地将id文本和事件对象添加到内联事件中就可以解决这个问题：
<button onclick="myFunction('myDropdown1', event)" class="dropbtn">Dropdown</button>
<button onclick="myFunction('myDropdown2', event)" class="dropbtn">Dropdown2</button>因此，您可以更改您的函数，以便处理参数。
单击下拉按钮时：
- 停止事件传播以避免window.onclick执行
- 隐藏/删除显示类到下拉内容div (如果有的话)
- 在当前下拉内容div上切换显示类。
单击窗口时，请确保位于下拉内容、可见div和下拉菜单按钮之外。
欲了解更多细节，请访问：
变量elt =element.closest(选择器)；： Element.closest()方法返回与参数中给定的选择器相匹配的当前元素(或当前元素本身)的最近祖先。如果没有这样的祖先，则返回null。- >var结果= 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43300336
复制相关文章
相似问题
腾讯云开发者
