javascript - 单击外部时下拉菜单折叠

Question

我是编码方面的新手，我想知道是否可以创建多个下拉菜单，并且每当您在打开的框外单击时，我希望它折叠起来。我正在共享我编写的代码，但它无法正常工作，因为在外部单击时，一个下拉菜单会折叠，而另一个则不会。你能帮我吗？我正在共享代码，我想要 3 个下拉菜单。我为此苦苦挣扎了几个星期，但我还没有成功。提前致谢!

    HTML Code

    <div class="container">
      <a href="#home"><span class="Agencymenu">Home</span></a>
      <a href="#news"><span class="Agencymenu">News</span></a>
      <div class="dropdown">
        <button class="dropbtn" onclick="myFunction()">Team 1</button>
        <div class="dropdown-content" id="myDropdown">
          <a href="#"><span class="Agencymenu">Link 1</span></a>
          <a href="#"><span class="Agencymenu">Link 2</span></a>
          <a href="#"><span class="Agencymenu">Link 3</span></a>
        </div>
      </div> 
      <div class="dropdown2">
        <button class="dropbtn2" onclick="myFunction2()">Team 2</button>
        <div class="dropdown-content2" id="myDropdown2">
          <a href="#"><span class="Agencymenu">Link 1</span></a>
          <a href="#"><span class="Agencymenu">Link 2</span></a>
          <a href="#"><span class="Agencymenu">Link 3</span></a>
        </div>
      </div> 
    </div>

CSS Code

        .Agencymenu {
        font-family: 'AGENCYB' !important;
        font-weight: bold;
        font-size: 24pt;
        color: #FFFFFF;
    }

    .container {
        overflow: hidden;
        background-color: #30333c;
        font-family: Arial;
    }

    .container a {
        float: left;
        font-size: 16px;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    .dropdown {
        float: left;
        overflow: hidden;
    }

    .dropdown .dropbtn {
        cursor: pointer;
        font-size: 16px;    
        border: none;
        outline: none;
        color: white;
        padding: 14px 16px;
        background-color: inherit;
        font-family:AGENCYB;
        font-size:30px;
    }

    .container a:hover, .dropdown:hover .dropbtn {
        background-color: #0C0;
    }

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

    .dropdown-content a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .dropdown-content a:hover {
        background-color: #ddd;
    }

    .show {
        display: block;
    }

    .container2 {
        overflow: hidden;
        background-color: #30333c;
        font-family: Arial;
    }

    .container2 a {
        float: left;
        font-size: 16px;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    .dropdown2 {
        float: left;
        overflow: hidden;
    }

    .dropdown2 .dropbtn2 {
        cursor: pointer;
        font-size: 16px;    
        border: none;
        outline: none;
        color: white;
        padding: 14px 16px;
        background-color: inherit;
        font-family:AGENCYB;
        font-size:30px;
    }

    .container2 a:hover, .dropdown2:hover .dropbtn2 {
        background-color: #0C0;
    }

    .dropdown-content2 {
        display: none;
        position: absolute;
        background-color: #30333c;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content2 a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .dropdown-content2 a:hover {
        background-color: #0C0;
    }

    .show2 {
        display: block;
    }

JS Code:  

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show2");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {
    var myDropdown = document.getElementById("myDropdown");
      if (myDropdown.classList.contains('show2')) {
        myDropdown.classList.remove('show2');
      }
  }
}

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction2() {
    document.getElementById("myDropdown2").classList.toggle("show2");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn2')) {
    var myDropdown2 = document.getElementById("myDropdown2");
      if (myDropdown2.classList.contains('show2')) {
        myDropdown2.classList.remove('show2');
      }
  }
}

Answer 1

如果您可以使用纯 CSS 解决方案并且需要悬停下拉菜单，您可以简单地使用此代码

.dropdown:hover .dropdown-content {display: block}

这是 fiddle https://jsfiddle.net/hkred6d7/1/

如果您需要点击它，请在评论中告诉我。这将需要 JS