菜單欄下拉菜單背景

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>