菜单栏下拉上下文

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 张视差幻灯片。这是一个学校项目，用于获得某种许可，所以我真的很想理解该代码（而且大部分时间我都这样做）。我理解每一个 "function"，但是当我把它们全部结合起来时……我就搞砸了。所以，请尽可能说清楚。谢谢！ 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执行
hide/remove 显示 class 下拉内容 div 如果有
切换显示 class 当前下拉内容 div

单击 window 时，请确保在下拉内容之外可见 div 和 dropbtn 按钮。

有关详细信息，请查看：

var elt = element.closest(selectors);:

The Element.closest() method returns the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter. If there isn't such an ancestor, it returns 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>

菜单栏下拉上下文

Menubar dropdown context

html

javascript

css

menubar

dropdown