JS函数删除两个相互干扰的不同类[重复]答案

【问题标题】：JS functions to remove two different classes interfering with one another [duplicate]JS函数删除两个相互干扰的不同类[重复]
【发布时间】：2017-08-16 21:49:54
【问题描述】：

我有两个JS函数：

function myFunctionMenu() {
  document.getElementById("main-menu").classList.toggle("shows");
}

和

function expandFunction() {
  document.getElementById("menu-button").classList.toggle("expand");
}

这两个切换类。这些类有样式：

.shows {
  margin-right: auto;
  margin-left: auto;
  display: block;
  transition: all 2s ease;
}

和

.expand {
  padding: 1% 20%;
  background-color: #8c8c8c;
}

然后我有另外两个函数，一个用于每个原始函数，当单击启动这两个函数的按钮外部时，它会删除该类：

window.onclick = function(event) {
  if (!event.target.matches('#menu-button')) {

      var dropdowns = document.getElementsByClassName("house-menu");
      var i;
      for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('shows')) {
          openDropdown.classList.remove('shows');
              }
          }
      }
  }

和

window.onclick = function(event) {
    if (!event.target.matches('#menu-button')) {

      var dropdowns = document.getElementsByClassName("dropbtn");
      var i;
      for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('expand')) {
          openDropdown.classList.remove('expand');
              }
          }
      }
  }

HTML 如下，以防万一：

<!doctype html>

<head>

  <title>Site Photos</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="Styles/new-menu.css">
  <script type="text/javascript" src="script/menu-scripts.js"></script>

</head>

<body>
  <br>
  <h1>
	  Name <br>
  </h1>
  <h2>
	Site Photos
  </h2>

  <!--Menu-->
  <div class="menu-container" div style="margin-left:auto; margin right:auto; margin-top:5%; margin-bottom:auto; width:40%;">
	 
  <!-- Main Menu Button -->
  <div id="main-button-container" style="text-align:center; margin-top:-8%;">
    <button onclick="myFunctionMenu();expandFunction()" class="dropbtn" id="menu-button"> Menu </button>
  </div>
	
<hr>
<!-- Main Menu Container -->
	<div id="main-menu" class="house-menu">
		<a href="main-house.html"> Main House </a><hr>
		<a href="car-barn-main.html"> Car Barn </a><hr>
		<a href="utility-building.html"> Utility Building </a><hr>
		<a href="under-construction.html"> Central Plant </a><hr>
		<a href="exteriors-and-siteworks.html">Exteriors</a><hr>
	</div>
<hr>
	
  </div>
</body>
</html>

我遇到的问题是我一次只能运行两个“在按钮外部单击时删除”功能之一。

谁能给我解释一下为什么？

谢谢。

【问题讨论】：

想一想，每次您执行window.onclick = ... 时，您都在分配一个新值，有效地覆盖了之前的值。
@adeneo :_)) 我刚刚准备了一个答案 :_)) 你不应该为窗口的 onclick 分配两个值加上这样做：<script> function classControl() { document.getElementById("main-menu").classList.toggle("shows"); document.getElementById("menu-button").classList.toggle("expand"); } window.onclick = function(event) { if (!event.target.matches('#menu-button')) { classControl(); } }; </script>
这不是那个问题的重复。我的按钮调用了两个都可以工作的函数。
@JasonVickersadVANture_time 将您的脚本更改为上述注释并将样式更改为：<style> .house-menu { display: none; } .shows { margin-right: auto; margin-left: auto; display: block; transition: all 2s ease; } .expand { padding: 1% 20%; background-color: #8c8c8c; } </style> 您的代码中也有拼写错误，请在样式属性中检查它们
这似乎是完全重复的，问题是分配给window.onclick 两次，这是无法完成的，并且接受的答案解决了该问题。

标签： javascript css

【解决方案1】：

因为第一个 window.onclick 将被第二个覆盖。就像写var a = 1; 和后来的var a = 2; 一样。为此，您应该使用document.addEventListener：

document.addEventListener("click", function(e){
  if (!e.target.matches('#menu-button')) {
    var dropdowns = document.getElementsByClassName("house-menu");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('shows')) {
        openDropdown.classList.remove('shows');
      }
    }
  }
});

和

document.addEventListener("click", function(e){
  if (!e.target.matches('#menu-button')) {

    var dropdowns = document.getElementsByClassName("dropbtn");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('expand')) {
        openDropdown.classList.remove('expand');
      }
    }
  }
});

【讨论】：

这是我一直在寻找的答案。