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}

这里是小提琴https://jsfiddle.net/hkred6d7/1/

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

Answer 2

使用jQuery会更容易，但这是一个使用vanilla JS的例子。这里的关键是为所有下拉列表重用一个css类

https://jsfiddle.net/fyjjzhqw/

//HTML
<body>
 <div class="wrapper">
   <div class="Dropdown">
    <div class="Dropdown__btn">Dropdown 1</div>
     <ul class="Dropdown__list">
       <li>Item A</li>
       <li>Item B</li>
       <li>Item C</li>
     </ul>
   </div>
   <div class="Dropdown">
    <div class="Dropdown__btn">Dropdown 2</div>
     <ul class="Dropdown__list">
       <li>Item A</li>
       <li>Item B</li>
       <li>Item C</li>
     </ul>
   </div>
   <div class="Dropdown">
    <div class="Dropdown__btn">Dropdown 3</div>
     <ul class="Dropdown__list">
       <li>Item A</li>
       <li>Item B</li>
       <li>Item C</li>
     </ul>
   </div>
 </div>
</body>

// CSS
.Dropdown__list {
 display: none
}

.is-opened.Dropdown .Dropdown__list {
 display: block
}

//JS

var dropdowns = document.querySelectorAll('.Dropdown');


var closeAll = function() {
 dropdowns.forEach( function(current) {
     current.classList.remove('is-opened')
 })
}
var toggleDropdown = function(e) {
 closeAll();
 var dropdown = e.currentTarget.parentElement;
 dropdown.classList.toggle('is-opened')
}
for (i = dropdowns.length - 1; i >= 0; i--) {
 dropdowns[i].querySelector('.Dropdown__btn').addEventListener('click', toggleDropdown)
}

Answer 3

您可以尝试使用此https://jsfiddle.net/aswin_89/hkred6d7/9/

稍微修改了你的JS

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

function clearClasses (target){
  document.querySelectorAll('.dropdown-content.show2').forEach((item)=>{
    if(event.target.nextElementSibling !== item)
      item.classList.remove('show2');
  })
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  clearClasses(event.target.nextElementSibling);
}

单击外部时，下拉列表将折叠

3 个答案: