與多個下拉選項一起使用時，下拉菜單工作錯誤

Question

我正在使用W3Schools的下拉菜單，如果有單個下拉選項，它將在其中工作。 它的鏈接

但是，即使我將GetElementById更改為GetElementsByClassName，也無法使用兩個下拉菜單進行操作。 這是無法正常工作的代碼的小提琴鏈接。

code.html

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn"  onclick="myFunction()">Dropdown1</a>
<div class="dropdown-content myDropdown">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown2</a>
<div class="dropdown-content myDropdown">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
 </div>
</li>

 function myFunction() {
   document.getElementsByClassName("myDropdown").classList.toggle("show");
}


 window.onclick = function(e) {
 if (!e.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
  var openDropdown = dropdowns[d];
  if (openDropdown.classList.contains('show')) {
    openDropdown.classList.remove('show');
  }
}
}
}

Answer 1

我通過提供兩個下拉列表ID修改了代碼。

        <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn"  onclick="myFunction(this)">Dropdown1</a>
    <div class="dropdown-content myDropdown" id="dropdown1">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
    </li>
    <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn" onclick="myFunction(this)">Dropdown2</a>
    <div class="dropdown-content myDropdown" id="dropdown2">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
     </div>
    </li>
    </ul>

    <h3>Dropdown Menu inside a Navigation Bar</h3>
    <p>Click on the "Dropdown" link to see the dropdown menu.</p>




    <script>
    /* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function myFunction(a) {
        //alert(a.nextElementSibling.id);    
        var divId = a.nextElementSibling.id;
        document.getElementById(divId).classList.toggle("show");
    }

    // Close the dropdown if the user clicks outside of it
    window.onclick = function(e) {
      if (!e.target.matches('.dropbtn')) {

        var dropdowns = document.getElementsByClassName("dropdown-content");
        for (var d = 0; d < dropdowns.length; d++) {
          var openDropdown = dropdowns[d];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    }
    </script>

Answer 2

您的小提琴無法正常工作，因為未定義myFunction （如果在瀏覽器中打開開發人員控制台，則會發現錯誤）。 那是因為jsFiddle包裝了您的JavaScript代碼

<script type="text/javascript">//<![CDATA[
window.onload=function(){
  // HERE comes your code
}//]]> 
</script>

因此，您的函數將僅在window.onload函數的范圍內可用，而在外部不可用，要使您的函數可用於html，您必須在window全局范圍內對其進行定義。

然后，您實際上可以開始使用函數了，您將看到document.getElementsByClassName("myDropdown")將所有下拉元素作為數組返回。 最簡單的解決方案是this參數添加到html中的myFunction調用中。 然后在您的函數中將“顯示”類切換到下一個元素。

<li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn" onclick="myFunction(this)">Dropdown1</a>
    <div class="dropdown-content myDropdown">
      <a href="#">Link 11</a>
      <a href="#">Link 21</a>
      <a href="#">Link 31</a>
    </div>
</li>

function myFunction(el) {
  el.nextElementSibling.classList.add("show");
}

在這里，當您單擊Dropdown1，然后單擊Dropdown2時，第一個下拉列表不會消失，您會注意到另一個問題。 這是工作的jsFiddle演示:)