Javascript 如何使用.removeclass或.toggleclass关闭所有弹出窗口

我希望能够关闭myPopup2分区，如果它正在显示，反之亦然。现在，如果我先单击myPopup2 Div，然后再单击myPopup1 Div，它就会在下面，我需要关闭myPopup2 Div

---

**打开弹出窗口1的功能应关闭弹出窗口2（如果显示），反之亦然

代码笔：

我试过这个

function myFunction1() {
  var popup = document.getElementById("myPopup1");
  popup.classList.toggle("show"); 
  
  if ( document.getElementById("myPopup2").classList.contains("show"))
  myFunction2();
  
}

但那没用。有什么建议吗

我有以下CSS

/* Popup container - can be anything you want */
.popup {
   position: fixed; 
  top: 70%;
  left: 40%;
  z-index: 1;
  margin: -25px 0 0 -25px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 500px;
  height: 350px;
  background-color: #555;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 8px 10px;
  position: absolute;
  z-index: 1;
  bottom: 50%;
  left:50%;
  margin-left: -80px;
}

/* Popup arrow */


/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible; 
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

我的HTML看起来像这样

<!-- DIV  POPUP #1 -->
<div class="popup">
  <span class="popuptext" id="myPopup1">
  <span onclick="myFunction1()"
      class="w3-button w3-display-topright">&times;</span>
  <b>1. Fiscal Target and Rules:<br> Does the government have fiscal institutions to support fiscal sustainability and to facilitate medium-term planning for public investment?</b>
  <br><br>
  <p>1.a. Is there a target or limit for government to ensure debt sustainability?</p>
  <p>1.b. Is fiscal policy guided by one or more permanent fiscal rules?</p>
  <p>1.c. Is there a medium-term fiscal framework (MTFF) to align budget preparation with fiscal policy?</p>
  
  </span>
</div>

<!-- DIV  POPUP #2 -->
<div class="popup">
  <span class="popuptext" id="myPopup2">
  <span onclick="myFunction2()"
      class="w3-button w3-display-topright">&times;</span>
  <b>2. Fiscal Target and Rules: Does the government have fiscal institutions to support fiscal sustainability and to facilitate medium-term planning for public investment?</b>
  <br><br>
  <p>1.a. Is there a target or limit for government to ensure debt sustainability?</p>
  <p>1.b. Is fiscal policy guided by one or more permanent fiscal rules?</p>
  <p>1.c. Is there a medium-term fiscal framework (MTFF) to align budget preparation with fiscal policy?</p>
  
  </span>
</div>

&时代；
1.财政目标和规则：
政府是否有财政机构支持财政可持续性并促进公共投资的中期规划？



1.a。政府是否有确保债务可持续性的目标或限制

1.b。财政政策是否由一项或多项永久性财政规则指导

1.c。是否有中期财政框架（MTFF）使预算编制与财政政策保持一致

&时代；
2.财政目标和规则：政府是否有支持财政可持续性和促进公共投资中期规划的财政机构？



1.a。政府是否有确保债务可持续性的目标或限制

1.b。财政政策是否由一项或多项永久性财政规则指导

1.c。是否有中期财政框架（MTFF）使预算编制与财政政策保持一致

我的Javascript如下所示：

<script>
// When the user clicks on <div>, open the popup
function myFunction1() {
  var popup = document.getElementById("myPopup1");
  popup.classList.toggle("show"); 
  
 
}
function myFunction2() {
  var popup = document.getElementById("myPopup2");
  popup.classList.toggle("show");
}
</script>

//当用户单击时，打开弹出窗口
函数myFunction1（）{
var popup=document.getElementById（“myPopup1”）；
popup.classList.toggle（“显示”）；
}
函数myFunction2（）{
var popup=document.getElementById（“myPopup2”）；
popup.classList.toggle（“显示”）；
}

我将为您提供另一种访问这些弹出窗口的方法。我已经对代码进行了注释。如果不清楚，请添加评论

通过这种方式，您可以添加许多弹出窗口，而无需更改js

PS：请注意，为了使代码段正常工作，我已经更改了一些CSS。此外，一些HTML被修改以实现多个弹出窗口的想法，这将非常适合您在这个饼图中有许多弹出窗口的情况

const popups=document.querySelectorAll（'.popup'）；
const buttons=document.querySelectorAll（'.js toggle model'）；
const closeButtons=document.querySelectorAll（'.js modal close'）；
const closeModals=（）=>{
//遍历所有弹出窗口并删除类显示
forEach（popup=>{
popup.classList.remove（'show'）；
})
}
closeButtons.forEach（按钮=>{
//单击“关闭”按钮关闭所有弹出窗口
按钮。addEventListener（'click'，函数（e）{
e、 预防默认值（）；
closeModals（）；
})
});
按钮。forEach（按钮=>{
//缓存每个按钮的目标
const target=document.querySelector（button.getAttribute（'data-target'）；
按钮。addEventListener（'click'，函数（e）{
e、 预防默认值（）；
//隐藏所有活动的弹出窗口
closeModals（）；
//显示当前目标弹出窗口
target.classList.add（'show'）；
});
});
/*弹出式容器-可以是您想要的任何内容*/
.弹出窗口{
位置：固定；
最高：50%；
左：50%；
z指数：1；
转换：翻译（-50%，-50%）；
光标：指针；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
不透明度：0；
可见性：隐藏；
转换：不透明度.3s，可见性.3s；
}
/*实际弹出窗口*/
.popup.popup\u文本{
宽度：500px；
高度：350px；
背景色：#555；
颜色：#fff；
文本对齐：左对齐；
边界半径：6px；
填充：8px 10px；
}
/*切换此类-隐藏并显示弹出窗口*/
.popup.show{
能见度：可见；
不透明度：1；
}
打开弹出窗口1
打开弹出窗口2
&时代；
1.财政目标和规则：
政府是否有财政机构支持财政可持续性并促进公共投资的中期规划？



1.a。政府是否有确保债务可持续性的目标或限制

1.b。财政政策是否由一项或多项永久性财政规则指导

1.c。是否有中期财政框架（MTFF）使预算编制与财政政策保持一致

&时代；
2.财政目标和规则：政府是否有支持财政可持续性和促进公共投资中期规划的财政机构？



1.a。政府是否有确保债务可持续性的目标或限制

1.b。财政政策是否由一项或多项永久性财政规则指导

1.c。是否有中期财政框架（MTFF）使预算编制与财政政策保持一致

打开popup 1的功能应该关闭popup 2，反之亦然。在css部分，
.popup.show
应该是
.popup.show
（不带空格）-请参见，使用空格，您可以设置任何具有“show”类的对象的样式，该类对象是具有“popup”类的对象的子对象。此外，如果一次只想显示一个div，那么还必须在另一个div上切换该类。但是，如果两者都已隐藏，则可能需要使用切换以外的其他方法。可能：popup.className=“show”和popup.className=“”-这将用“show”或空字符串替换它。@ATD他的ID在弹出窗口的内部元素中，因此
.popup.show
将在他的情况下工作。谢谢，但我在图表javascript中使用以下内容：`categoryAxis.renderer.labels.template.events.on（“hit”，函数（事件）{openPop（event.target.dataItem.category）；}）函数openPop（category）{if（category==“1.Fiscal Targets and Rules”）{var popup=document.getElementById（“myPopup1”）；popup.classList.toggle（“show”）；}if（category==“2.National and sectional\n规划”）{var popup=document.getElementById（“myPopup2”）；popup.classList.toggle(“show”）；}`@Rado