菜单栏下拉菜单背景

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%; 
 
    \t  margin: 0; 
 
     /* Create the parallax scrolling effect */ 
 
     background-attachment: fixed; 
 
    \t 
 
     background-position: center; 
 
    \t 
 
     background-repeat: no-repeat; 
 
    \t 
 
     background-size: cover; 
 
    } 
 
    button{ 
 
    \t background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,0)); 
 
     border: none; 
 
    \t font-family: "Roboto"; 
 
    \t color: rgba(0, 0, 0, 0.5); 
 
    \t text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4); 
 
    \t text-decoration: none; 
 
    \t display: block; 
 
     display: inline-block; 
 
     font-size: 26px; 
 
    \t z-index: 1; 
 
    \t float: left; 
 
    } 
 
    .fixed{ 
 
    \t position: fixed; 
 
    } 
 
    .textbackground 
 
    { 
 
    \t position: absolute; 
 
    \t left: 100px; 
 
    \t top: 150px; 
 
    } 
 
    .textbackgroundbar{ 
 
    \t overflow: hidden; 
 
    \t width: 800px; 
 
    \t height: 50px; 
 
    \t 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; 
 
    \t position: absolute; 
 
    \t background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.1)); 
 
    \t min-width: 800px; 
 
    \t 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"> 
 
    \t <div class="textbackground"> 
 
     \t <div class="textbackgroundbar"> 
 
    \t <div class="dropdown"> 
 
    \t   <button onclick="myFunction()" class="dropbtn">Dropdown</button> 
 
    \t \t \t <button onclick="myFunction()" class="dropbtn">Dropdown2</button> 
 
    \t </div> 
 
\t </div> 
 
    <div id="myDropdown" class="dropdown-content"> 
 
      <a href="#home">Home</a> 
 
      <a href="#about">About</a> 
 
      <a href="#contact">Contact</a> 
 
    </div> 
 
    \t \t \t \t \t 
 
    <div id="myDropdown" class="dropdown-content"> 
 
    \t <a href="#home">Home2</a> 
 
    \t <a href="#about">About2</a> 
 
    \t <a href="#contact">Contact2</a> 
 
    </div> 
 
    </div> \t 
 
</div> 
 
\t

这里有什么问题？它应该下拉2不同的东西，当我点击特定的按钮..但它不。 如果我点击下拉菜单，它会显示关于联系人的主页。如果我点击下拉2，同样的家庭关于联系，但我想它是home2 about2 contact2。整个网站包含5个视差幻灯片。这是一个学校的项目，获得某种许可证，所以我真的想了解该代码（并且大部分是我）。我理解每一个“功能”，但是当我把它们全部合并时......我只是搞砸了。 所以，请尽量清楚。谢谢 ！ PS：对不起，我的英语不好，这不是我的第一语言.. :(

Answer 1

您使用的是相同的ID为两个不同的div元素

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