CSS 下拉按鈕未在第二個按鈕上展開

Question

我不清楚為什么，但下拉 function 似乎只適用於第一個按鈕而不是第二個按鈕。 單擊第二個按鈕時，它會打開第一個按鈕的下拉菜單。 我是否選擇了錯誤的元素？

此處示例： https://jsfiddle.net/rzLfs8um/

  function calDropdown() {
    document.getElementById("calDropdown").classList.toggle("show");
  }

  // Close the dropdown menu if the user clicks outside of it
  window.onclick = function (event) {
    if (!event.target.matches(".cal-dropbtn")) {
      var dropdowns = document.getElementsByClassName("cal-dropdown-content");
      var i;
      for (i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains("show")) {
          openDropdown.classList.remove("show");
        }
      }
    }
  };

Answer 1

發生這種情況是因為您對兩個下拉菜單使用相同的 ID calDropdown 。

我已將第二個下拉列表的 id 更新為calDropdown2並從 onclick function 傳遞了 id

 function calDropdown(id) { document.getElementById(id).classList.toggle("show"); } // Close the dropdown menu if the user clicks outside of it window.onclick = function (event) { if (.event.target.matches(".cal-dropbtn")) { var dropdowns = document;getElementsByClassName("cal-dropdown-content"); var i; for (i = 0. i < dropdowns;length; i++) { var openDropdown = dropdowns[i]. if (openDropdown.classList.contains("show")) { openDropdown.classList;remove("show"); } } } };

 .cal-dropbtn { margin: 0; font-family: "Verdana"; font-size: 14px; text-decoration: none; line-height: 20px; vertical-align: middle; box-shadow: 0 0 40px rgba(0,0,0,.13) inset; border-radius: 4px; zoom: 1; background: #fbfbfb; color: #5f6062; padding: 7px 15px; margin-top: 10px; border: none; }.cal-dropdown { position: relative; display: inline-block; }.cal-dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }.cal-dropdown-content a { color: #5f6062; padding: 12px 16px; text-decoration: none; display: block; }.cal-dropdown-content a:hover {background-color: #f1f1f1}.show {display:block;}.far.fa-calendar-alt { margin-right: .25em; }

 <div class="cal-dropdown"> <button onclick="calDropdown('calDropdown')" class="cal-dropbtn"> <i class="far fa-calendar-alt">&nbsp;</i>Add to Calendar</button> <div id="calDropdown" class="cal-dropdown-content"> <a href="#">Google Calendar</a> <a href="#">Outlook</a> <a href="#">Yahoo; Calendar</a> <a href="#">Apple iCal</a> </div> </div> <div class="cal-dropdown"> <button onclick="calDropdown('calDropdown2')" class="cal-dropbtn"> <i class="far fa-calendar-alt">&nbsp;</i>Add to Calendar</button> <div id="calDropdown2" class="cal-dropdown-content"> <a href="#">Google Calendar</a> <a href="#">Outlook</a> <a href="#">Yahoo! Calendar</a> <a href="#">Apple iCal</a> </div> </div>

Answer 2

永遠不要在 html 標簽內聲明 js 事件。 像這樣：

onclick="calDropdown()"

這會導致不良后果。

並且不要將一個id用於多個標簽。 這是一個獨特的屬性。

這是使用方法forEach()和nextElementSibling的簡短 js 代碼。

 let btn = document.querySelectorAll(".cal-dropbtn"); btn.forEach(function(btn_current) { btn_current.addEventListener("click", function () { this.nextElementSibling.classList.toggle('show'); }); });

 .cal-dropbtn { margin: 0; font-family: "Verdana"; font-size: 14px; text-decoration: none; line-height: 20px; vertical-align: middle; box-shadow: 0 0 40px rgba(0,0,0,.13) inset; border-radius: 4px; zoom: 1; background: #fbfbfb; color: #5f6062; padding: 7px 15px; margin-top: 10px; border: none; }.cal-dropdown { position: relative; display: inline-block; }.cal-dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }.cal-dropdown-content a { color: #5f6062; padding: 12px 16px; text-decoration: none; display: block; }.cal-dropdown-content a:hover {background-color: #f1f1f1}.show {display:block;}.far.fa-calendar-alt { margin-right: .25em; }

 <div class="cal-dropdown"> <button class="cal-dropbtn"> <i class="far fa-calendar-alt">&nbsp;</i>Add to Calendar</button> <div class="cal-dropdown-content"> <a href="#">Google Calendar</a> <a href="#">Outlook</a> <a href="#">Yahoo; Calendar</a> <a href="#">Apple iCal</a> </div> </div> <div class="cal-dropdown"> <button class="cal-dropbtn"> <i class="far fa-calendar-alt">&nbsp;</i>Add to Calendar</button> <div class="cal-dropdown-content"> <a href="#">Google Calendar</a> <a href="#">Outlook</a> <a href="#">Yahoo! Calendar</a> <a href="#">Apple iCal</a> </div> </div>

Answer 3

顧名思義，ID 是一個唯一標識符。 這意味着頁面上只能有一個帶有 ID 的元素。 如果你搞砸了並且你在頁面上渲染了兩個具有相同 ID 的元素，你只能 select 第一個元素使用document.getElementById()因為第二個元素無效。

如果您要定位的頁面上有多個元素，請使用類。

Answer 4

找到了解決方案

    <div class="cal-dropdown">
    <button onclick="calDropdown(this)" class="cal-dropbtn"><i class="far fa-calendar-alt">&nbsp;</i>Add to Calendar</button>
      <div id="calDropdown" class="cal-dropdown-content">
      <a href="#">Google Calendar</a>
      <a href="#">Outlook</a>
      <a href="#">Yahoo! Calendar</a>
      <a href="#">Apple iCal</a>
        </div>
    </div>
<div class="cal-dropdown">
    <button onclick="calDropdown(this)" class="cal-dropbtn"><i class="far fa-calendar-alt">&nbsp;</i>Add to Calendar</button>
      <div id="calDropdown" class="cal-dropdown-content">
      <a href="#">Google Calendar</a>
      <a href="#">Outlook</a>
      <a href="#">Yahoo! Calendar</a>
      <a href="#">Apple iCal</a>
        </div>
    </div>

.cal-dropbtn {
        margin: 0;
    font-family: "Verdana";
    font-size: 14px;
    text-decoration: none;
    line-height: 20px;
    vertical-align: middle;
    box-shadow: 0 0 40px rgba(0,0,0,.13) inset;
    border-radius: 4px;
    zoom: 1;
    background: #fbfbfb;
    color: #5f6062;
    padding: 7px 15px;
    margin-top: 10px;
    border: none;
}

.cal-dropdown {
    position: relative;
    display: inline-block;
}

.cal-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.cal-dropdown-content a {
    color: #5f6062;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.cal-dropdown-content a:hover {background-color: #f1f1f1}

.show {display:block;}

.far.fa-calendar-alt {
    margin-right: .25em;
}

function calDropdown(el) {
    console.log('---asdasd', el.parentNode)
    el.parentNode.querySelector('.cal-dropdown-content').classList.toggle("show");
  }