打开另一个导航下拉菜单时不关闭

Posted

技术标签:

【中文标题】打开另一个导航下拉菜单时不关闭【英文标题】：Navigation drop downs dont close when opening another 【发布时间】：2018-08-12 00:41:30 【问题描述】：

这几乎可以按预期工作，单击屏幕时下拉菜单会关闭，但在打开新下拉菜单时它们会保持打开状态。我希望它在打开新下拉菜单时也关闭打开的下拉菜单。为了使它做到这一点，我必须在脚本中进行哪些更改？提前谢谢你。

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


function myFunction2(event) 
  event.stopPropagation();
  document.getElementById("myDropdown2").classList.toggle("show");


function myFunction3(event) 
  event.stopPropagation();
  document.getElementById("myDropdown3").classList.toggle("show");




// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) 
  document.getElementById("myDropdown").classList.remove("show");
  document.getElementById("myDropdown2").classList.remove("show");
  document.getElementById("myDropdown3").classList.remove("show");

/* Dropdown Button */

.dropbtn 
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;



/* Dropdown button on hover & focus */

.dropbtn:hover,
.dropbtn:focus 
  background-color: #3e8e41;



/* The container <div> - needed to position the dropdown content */

.dropdown 
  position: relative;
  display: inline-block;



/* Dropdown Content (Hidden by Default) */

.dropdown-content 
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);



/* Links inside the dropdown */

.dropdown-content a 
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;



/* Change color of dropdown links on hover */

.dropdown-content a:hover 
  background-color: #f1f1f1



/* Show the dropdown menu (use JS to add this class to the .dropdown-content     container when the user clicks on the dropdown button) */

.show 
  display: block;



/* Dropdown Button */

.dropbtn2 
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;



/* Dropdown button on hover & focus */

.dropbtn2:hover,
.dropbtn2:focus 
  background-color: #3e8e41;



/* The container <div> - needed to position the dropdown content */

.dropdown2 
  position: relative;
  display: inline-block;



/* Dropdown Content (Hidden by Default) */

.dropdown-content2 
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);



/* Links inside the dropdown */

.dropdown-content2 a 
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;



/* Change color of dropdown links on hover */

.dropdown-content2 a:hover 
  background-color: #f1f1f1



/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show 
  display: block;



/* Dropdown Button */

.dropbtn3 
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;



/* Dropdown button on hover & focus */

.dropbtn3:hover,
.dropbtn3:focus 
  background-color: #3e8e41;



/* The container <div> - needed to position the dropdown content */

.dropdown3 
  position: relative;
  display: inline-block;



/* Dropdown Content (Hidden by Default) */

.dropdown-content3 
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);



/* Links inside the dropdown */

.dropdown-content3 a 
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;



/* Change color of dropdown links on hover */

.dropdown-content3 a:hover 
  background-color: #f1f1f1



/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show 
  display: block;

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">



</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
  </script>
  <table>
    <tr>
      <td>
        <div class="dropdown">
          <button onclick="myFunction(event)" 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>
      </td>
      <td>
        <div class="dropdown2">
          <button onclick="myFunction2(event)" class="dropbtn2">Dropdown2</button>
          <div id="myDropdown2" class="dropdown-content2">
            <a href="#">Link 4</a>
            <a href="#">Link 5</a>
            <a href="#">Link 6</a>
          </div>
        </div>

      </td>
      <td>
        <div class="dropdown3">
          <button onclick="myFunction3(event)" class="dropbtn3">Dropdown3</button>
          <div id="myDropdown3" class="dropdown-content3">
            <a href="#">Link 7</a>
            <a href="#">Link 8</a>
            <a href="#">Link 9</a>
          </div>
        </div>

      </td>
    </tr>
  </table>

</body>

</html>

【问题讨论】：

【参考方案1】：

您可以在 myFunctions 中使用 classList.remove 从其他 div 中删除类 show。 

/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function myFunction(event) 
  event.stopPropagation();
  document.getElementById("myDropdown").classList.toggle("show");
  document.getElementById("myDropdown2").classList.remove("show");
  document.getElementById("myDropdown3").classList.remove("show");


function myFunction2(event) 
  event.stopPropagation();
  document.getElementById("myDropdown2").classList.toggle("show");
  document.getElementById("myDropdown").classList.remove("show");
  document.getElementById("myDropdown3").classList.remove("show");


function myFunction3(event) 
  event.stopPropagation();
  document.getElementById("myDropdown3").classList.toggle("show");
  document.getElementById("myDropdown").classList.remove("show");
  document.getElementById("myDropdown2").classList.remove("show");




// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) 
  document.getElementById("myDropdown").classList.remove("show");
  document.getElementById("myDropdown2").classList.remove("show");
  document.getElementById("myDropdown3").classList.remove("show");

/* Dropdown Button */

.dropbtn 
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;



/* Dropdown button on hover & focus */

.dropbtn:hover,
.dropbtn:focus 
  background-color: #3e8e41;



/* The container <div> - needed to position the dropdown content */

.dropdown 
  position: relative;
  display: inline-block;



/* Dropdown Content (Hidden by Default) */

.dropdown-content 
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);



/* Links inside the dropdown */

.dropdown-content a 
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;



/* Change color of dropdown links on hover */

.dropdown-content a:hover 
  background-color: #f1f1f1



/* Show the dropdown menu (use JS to add this class to the .dropdown-content     container when the user clicks on the dropdown button) */

.show 
  display: block;



/* Dropdown Button */

.dropbtn2 
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;



/* Dropdown button on hover & focus */

.dropbtn2:hover,
.dropbtn2:focus 
  background-color: #3e8e41;



/* The container <div> - needed to position the dropdown content */

.dropdown2 
  position: relative;
  display: inline-block;



/* Dropdown Content (Hidden by Default) */

.dropdown-content2 
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);



/* Links inside the dropdown */

.dropdown-content2 a 
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;



/* Change color of dropdown links on hover */

.dropdown-content2 a:hover 
  background-color: #f1f1f1



/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show 
  display: block;



/* Dropdown Button */

.dropbtn3 
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;



/* Dropdown button on hover & focus */

.dropbtn3:hover,
.dropbtn3:focus 
  background-color: #3e8e41;



/* The container <div> - needed to position the dropdown content */

.dropdown3 
  position: relative;
  display: inline-block;



/* Dropdown Content (Hidden by Default) */

.dropdown-content3 
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);



/* Links inside the dropdown */

.dropdown-content3 a 
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;



/* Change color of dropdown links on hover */

.dropdown-content3 a:hover 
  background-color: #f1f1f1



/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show 
  display: block;

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">



</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
  </script>
  <table>
    <tr>
      <td>
        <div class="dropdown">
          <button onclick="myFunction(event)" 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>
      </td>
      <td>
        <div class="dropdown2">
          <button onclick="myFunction2(event)" class="dropbtn2">Dropdown2</button>
          <div id="myDropdown2" class="dropdown-content2">
            <a href="#">Link 4</a>
            <a href="#">Link 5</a>
            <a href="#">Link 6</a>
          </div>
        </div>

      </td>
      <td>
        <div class="dropdown3">
          <button onclick="myFunction3(event)" class="dropbtn3">Dropdown3</button>
          <div id="myDropdown3" class="dropdown-content3">
            <a href="#">Link 7</a>
            <a href="#">Link 8</a>
            <a href="#">Link 9</a>
          </div>
        </div>

      </td>
    </tr>
  </table>

</body>

</html>

【讨论】：

【参考方案2】：

试试这个。

function myFunction(event) 
  event.stopPropagation();
  document.getElementById("myDropdown2").classList.remove("show");
  document.getElementById("myDropdown3").classList.remove("show");
  document.getElementById("myDropdown").classList.toggle("show");


function myFunction2(event) 
  event.stopPropagation();
  document.getElementById("myDropdown3").classList.remove("show");
  document.getElementById("myDropdown").classList.remove("show");
  document.getElementById("myDropdown2").classList.toggle("show");


function myFunction3(event) 
  event.stopPropagation();
  document.getElementById("myDropdown2").classList.remove("show");
  document.getElementById("myDropdown").classList.remove("show");
  document.getElementById("myDropdown3").classList.toggle("show");




// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) 
  document.getElementById("myDropdown").classList.remove("show");
  document.getElementById("myDropdown2").classList.remove("show");
  document.getElementById("myDropdown3").classList.remove("show");

/* Dropdown Button */

.dropbtn 
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;

/* Dropdown button on hover & focus */

.dropbtn:hover,
.dropbtn:focus 
  background-color: #3e8e41;

/* The container <div> - needed to position the dropdown content */

.dropdown 
  position: relative;
  display: inline-block;

/* Dropdown Content (Hidden by Default) */

.dropdown-content 
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

/* Links inside the dropdown */

.dropdown-content a 
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;

/* Change color of dropdown links on hover */

.dropdown-content a:hover 
  background-color: #f1f1f1

/* Show the dropdown menu (use JS to add this class to the .dropdown-content     container when the user clicks on the dropdown button) */

.show 
  display: block;

/* Dropdown Button */

.dropbtn2 
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;

/* Dropdown button on hover & focus */

.dropbtn2:hover,
.dropbtn2:focus 
background-color: #3e8e41;

/* The container <div> - needed to position the dropdown content */

.dropdown2 
  position: relative;
  display: inline-block;

/* Dropdown Content (Hidden by Default) */

.dropdown-content2 
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

/* Links inside the dropdown */

.dropdown-content2 a 
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;

/* Change color of dropdown links on hover */

.dropdown-content2 a:hover 
  background-color: #f1f1f1



/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show 
  display: block;


/* Dropdown Button */

.dropbtn3 
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;

/* Dropdown button on hover & focus */

.dropbtn3:hover,
.dropbtn3:focus 
  background-color: #3e8e41;

/* The container <div> - needed to position the dropdown content */

.dropdown3 
  position: relative;
  display: inline-block;

/* Dropdown Content (Hidden by Default) */

.dropdown-content3 
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

/* Links inside the dropdown */

.dropdown-content3 a 
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;

/* Change color of dropdown links on hover */

.dropdown-content3 a:hover 
  background-color: #f1f1f1



/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show 
  display: block;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div class="dropdown">
        <button onclick="myFunction(event)" 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>
    </td>
    <td>
      <div class="dropdown2">
        <button onclick="myFunction2(event)" class="dropbtn2">Dropdown2</button>
        <div id="myDropdown2" class="dropdown-content2">
          <a href="#">Link 4</a>
          <a href="#">Link 5</a>
          <a href="#">Link 6</a>
        </div>
      </div>
    </td>
    <td>
      <div class="dropdown3">
        <button onclick="myFunction3(event)" class="dropbtn3">Dropdown3</button>
        <div id="myDropdown3" class="dropdown-content3">
          <a href="#">Link 7</a>
          <a href="#">Link 8</a>
          <a href="#">Link 9</a>
        </div>
      </div>
    </td>
  </tr>
</table>

【讨论】：

【参考方案3】：

创建一个清除所有下拉列表的简单函数，并在显示每个下拉列表以及单击窗口之前触发它。

/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function myFunction(event) 
  event.stopPropagation();
  closeDropdowns();
  document.getElementById("myDropdown").classList.toggle("show");


  function myFunction2(event) 
  event.stopPropagation();
   closeDropdowns();
  document.getElementById("myDropdown2").classList.toggle("show");


function myFunction3(event) 
  event.stopPropagation();
  closeDropdowns();
  document.getElementById("myDropdown3").classList.toggle("show");


function closeDropdowns()
  document.getElementById("myDropdown").classList.remove("show");
  document.getElementById("myDropdown2").classList.remove("show");
  document.getElementById("myDropdown3").classList.remove("show");


// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) 
  closeDropdowns();

【讨论】：

谢谢你的回答，搞定了

以上是关于打开另一个导航下拉菜单时不关闭的主要内容，如果未能解决你的问题，请参考以下文章

在打开另一个下拉菜单之前完全关闭一个下拉菜单

Bootstrap 4打开多个导航栏下拉菜单，无需切换

当打开一个下拉菜单时关闭另一个

当用户在菜单外单击时，如何关闭 Bootstrap 导航栏下拉菜单？

Bootstrap - 移动菜单中的下拉菜单打开正常，无法关闭下拉菜单

导航栏中的引导下拉菜单未打开