多个下拉按钮列表JavaScript

Question

我只是想知道你们中是否有人有一个可以帮助我在一个页面上添加多个下拉按钮的解决方案。我相信我的JavaScript部分有问题。我希望能够在同一页面上嵌入至少两个或更多下拉按钮。

当我使用当前代码执行此操作时，当您单击第二个按钮时，下拉菜单会关闭第一个元素。

代码段

＆＃13;

＆＃13;

    function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
    }
    
    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');
          }
        }
      }
    }

＆＃13;

    .dropbtn {
        background-color: #3498DB;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
    }


    .dropbtn:hover, .dropbtn:focus {
        background-color: #2980B9;
    }


    .dropdown {
        position: relative;
        display: inline-block;
    }
    
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }
    
    
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
    
    
    .dropdown-content a:hover {background-color: #ddd}
    
    
    .show {display:block;}
    

＆＃13;

<div class="dropdown">
          <button onclick="myFunction()" class="dropbtn">Dropdown</button>
         <div id="myDropdown" class="dropdown-content">
           <a href="#">Link 1</a>
           <a href="#">Link 2</a>
           <a href="#">Link 3</a>
        </div>
       </div>

        <div class="dropdown">
          <button onclick="myFunction()" class="dropbtn">Dropdown</button>
         <div id="myDropdown" class="dropdown-content">
           <a href="#">Link 1</a>
           <a href="#">Link 2</a>
           <a href="#">Link 3</a>
        </div>
       </div>

    

＆＃13;

＆＃13;

＆＃13;

Answer 1

为每个下拉列表

制作2个单独的功能

function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
    }
function myFunction2() {
        document.getElementById("myDropdown2").classList.toggle("show");
    }
    
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');
      }
    }
  }
}

.dropbtn {
        background-color: #3498DB;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
    }


    .dropbtn:hover, .dropbtn:focus {
        background-color: #2980B9;
    }


    .dropdown {
        position: relative;
        display: inline-block;
    }
    
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }
    
    
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
    
    
    .dropdown-content a:hover {background-color: #ddd}
    
    
    .show {display:block;}

<div class="dropdown">
          <button onclick="myFunction()" class="dropbtn">Dropdown</button>
         <div id="myDropdown" class="dropdown-content">
           <a href="#">Link 1</a>
           <a href="#">Link 2</a>
           <a href="#">Link 3</a>
        </div>
       </div>

        <div class="dropdown">
          <button onclick="myFunction2()" class="dropbtn">Dropdown</button>
         <div id="myDropdown2" class="dropdown-content">
           <a href="#">Link- 1</a>
           <a href="#">Link- 2</a>
           <a href="#">Link- 3</a>
        </div>
       </div>