当单击一个下拉菜单时，其他下拉菜单将关闭

Question

I created a dropdown list Javascript Toggle method.我创建了一个下拉列表 Javascript 切换方法。 I face a problem a problem.我面临一个问题一个问题。 The problem is - After clicking one dropdown, another dropdown still opens.问题是 - 单击一个下拉菜单后，另一个下拉菜单仍然打开。 I want others dropdown Will to be closed when I click on dropdown.我希望其他下拉列表将在我单击下拉列表时关闭。 This happen will be each dropdown.这将发生在每个下拉列表中。 How do I do it?我该怎么做？

<html>
   <head>
       <style>
     nav{
     width:100%;
     height:50px;
     background-color:#000;
     }
     button{
     height:50px;
     margin-left: 10px;
     border:0;
     background-color: transparent;
     color: #fff;
     cursor: pointer;
     }
     div{
     display: none;
     width: 100%;
     height: 300px;
     position: absolute;
     }
     #myDIV1{
     background-color: rgb(0,0,255);
     color: #fff;
     }
     #myDIV2{
     background-color: rgb(0,255,0);
     color: #000;
     }
     .show{
     display:block;
     }
  </style>
   </head>
   <body>
     <nav>
     <button onclick="myFunction1()">Dropdown1</button>
     <button onclick="myFunction2()">Dropdown2</button>
  </nav>
  <div id="myDIV1">
     This Dropdown for Dropdown 1
  </div>
  <div id="myDIV2">
     This Dropdown for dropdown 2
  </div>
  <script>
     function myFunction1() {
        var element = document.getElementById("myDIV1");
        element.classList.toggle("show");
     }
     function myFunction2() {
        var element = document.getElementById("myDIV2");
        element.classList.toggle("show");
     }
  </script>
   </body>
</html>

Answer 1

here is the solution, all the code is commented.这是解决方案，所有代码都已注释。

 let div1 = document.getElementById("myDIV1"); let div2 = document.getElementById("myDIV2"); function myFunction1() { div1.classList.toggle("show"); // remove the class for the second div div2.classList.remove("show"); } function myFunction2() { div2.classList.toggle("show"); // remove the class for the first div div1.classList.remove("show"); }

 nav { width: 100%; height: 50px; background-color: #000; } button { height: 50px; margin-left: 10px; border: 0; background-color: transparent; color: #fff; cursor: pointer; } div { display: none; width: 100%; height: 300px; position: absolute; } #myDIV1 { background-color: rgb(0, 0, 255); color: #fff; } #myDIV2 { background-color: rgb(0, 255, 0); color: #000; } /* this is the class we add and remove or toggle with javascript*/.show { display: block; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <script src="./script.js" defer></script> </head> <body> <!-- navbar --> <nav> <button onclick="myFunction1()">Dropdown1</button> <button onclick="myFunction2()">Dropdown2</button> </nav> <!-- 1 --> <div id="myDIV1"> This Dropdown for Dropdown 1 </div> <!-- 2 --> <div id="myDIV2"> This Dropdown for dropdown 2 </div> </body> </html>

Answer 2

You can make this a little easier to scale by using one function for all dropdown menus.您可以通过对所有下拉菜单使用一个 function 来使其更容易扩展。 This function closes all open drop-downs and toggles the target one.此 function 关闭所有打开的下拉菜单并切换目标下拉菜单。

function toggleDropDown(id) {
  document.querySelectorAll('.dropdown-menu').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show"));
}

 function toggleDropDown(id) { document.querySelectorAll('.dropdown-menu').forEach(el => el.id === id? el.classList.toggle('show'): el.classList.remove("show")); }

 nav { width: 100%; height: 50px; background-color: #000; } button { height: 50px; margin-left: 10px; border: 0; background-color: transparent; color: #fff; cursor: pointer; }.dropdown-menu { display: none; width: 100%; height: 300px; position: absolute; } #myDIV1 { background-color: rgb(0, 0, 255); color: #fff; } #myDIV2 { background-color: rgb(0, 255, 0); color: #000; }.show { display: block; }

 <nav> <button onclick="toggleDropDown('myDIV1')">Dropdown1</button> <button onclick="toggleDropDown('myDIV2')">Dropdown2</button> </nav> <div class='dropdown-menu' id="myDIV1"> This Dropdown for Dropdown 1 </div> <div class='dropdown-menu' id="myDIV2"> This Dropdown for dropdown 2 </div>

Here is the same thing, but instead of hard-coding click events, it's better practice to use eventListeners, which get applied through the script after the page loads, like:这是同样的事情，但不是硬编码点击事件，而是使用 eventListeners 更好的做法，它会在页面加载后通过脚本应用，例如：

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('nav button').forEach(button => {
    button.addEventListener('click', e => {
      let id = e.target.dataset.dropdown
      document.querySelectorAll('.dropdown-menu').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show"));
    })
  })
})

 document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('nav button').forEach(button => { button.addEventListener('click', e => { let id = e.target.dataset.dropdown document.querySelectorAll('.dropdown-menu').forEach(el => el.id === id? el.classList.toggle('show'): el.classList.remove("show")); }) }) })

 nav { width: 100%; height: 50px; background-color: #000; } button { height: 50px; margin-left: 10px; border: 0; background-color: transparent; color: #fff; cursor: pointer; }.dropdown-menu { display: none; width: 100%; height: 300px; position: absolute; } #myDIV1 { background-color: rgb(0, 0, 255); color: #fff; } #myDIV2 { background-color: rgb(0, 255, 0); color: #000; }.show { display: block; }

 <nav> <button data-dropdown="myDIV1">Dropdown1</button> <button data-dropdown="myDIV2">Dropdown2</button> </nav> <div class='dropdown-menu' id="myDIV1"> This Dropdown for Dropdown 1 </div> <div class='dropdown-menu' id="myDIV2"> This Dropdown for dropdown 2 </div>

当单击一个下拉菜单时，其他下拉菜单将关闭

问题描述

2 个解决方案

解决方案1
0 2022-01-06 20:55:04

解决方案2
0 2022-01-06 20:55:27

当单击一个下拉菜单时，其他下拉菜单将关闭

问题描述

2 个解决方案

解决方案1 0 2022-01-06 20:55:04

解决方案2 0 2022-01-06 20:55:27

解决方案1
0 2022-01-06 20:55:04

解决方案2
0 2022-01-06 20:55:27