Question

我有一个按钮列表，这些按钮在单击时会显示类似工具提示的弹出窗口，在再次单击时将其关闭。

我正在寻找：当您单击其中一个按钮时，在打开之前打开的任何弹出窗口都会自动关闭，而无需再次单击。

function myFunction2() {
    var popup = document.getElementById("myPopup2");
    popup.classList.toggle("show");
    }
function myFunction3() {
    var popup = document.getElementById("myPopup3");
    popup.classList.toggle("show");
    }

Answer 1

一种简单的实现方法是同时在每个元素（弹出窗口）上切换类。

为简单起见，您还可以为每个弹出窗口分配相同的类。

示例：

function myFunction() {
    var popups = document.getElementsByClassName("myPopup");
    for( var i = 0 ; i< popups.length; i++) {
      popups[i].classList.toggle("show");
    }
}

Answer 2

将一个类（假设它为“ btns ”）应用于所有按钮（假设您使用的是<button>标签），然后尝试执行以下操作：

function myFunction() {
    var popup = document.getElementById("myPopup");

    if (document.querySelectorAll("button.btns").style.display = "block") {
        document.querySelectorAll("button.btns").style.display = "none";
        &&
        popup.classList.toggle("show");
    }

单击另一个时如何关闭弹出窗口？

2 个答案: