菜单栏下拉上下文

Question

/* 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：请原谅我的英语不好，这不是我的第一语言.. :(

Answer 1

您对两个不同的 div 元素使用相同的 ID。

ID 必须是唯一的。

您只需将 id 文本和事件对象添加到您的内联事件即可解决此问题：

<button onclick="myFunction('myDropdown1', event)" class="dropbtn">Dropdown</button>
<button onclick="myFunction('myDropdown2', event)" class="dropbtn">Dropdown2</button>

因此您可以更改函数以处理参数。

点击 dropbtn 按钮时：

• 停止事件传播以避免 window.onclick 执行
• 隐藏/删除显示类到下拉内容 div（如果有）
• 在当前下拉内容 div 上切换显示类

点击窗口时一定要在下拉内容可见的 div 和 dropbtn 按钮之外。

欲了解更多详情，请查看：

var elt = element.closest(selectors);:

Element.closest() 方法返回与参数中给定的选择器匹配的当前元素（或当前元素本身）的最近祖先。如果没有这样的祖先，则返回 null。 - >var 结果 = element.matches(selectorString);

sn-p：

/* 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>