如果所有覆盖关闭，则执行功能

Question

我在页面顶部的横幅上有一个按钮，可以在屏幕上启动多个 yui2 叠加层。每个叠加层都有一个关闭按钮（它只是将可见性更改为隐藏，以便可以重复使用）。叠加层启动后，横幅上还会出现一个按钮，如果单击该按钮将关闭所有叠加层。

这使用户可以选择关闭所有或单独关闭每个。这就是我所坚持的：

如果用户关闭了单个叠加层，在我关闭叠加层后，我想检查是否还有其他叠加层处于打开状态。如果他们碰巧单独关闭了所有这些，那么我需要还原顶部的横幅并删除“关闭所有按钮”。

我可以通过以下方式搜索所有叠加层：

var elements = YAHOO.util.Dom.getElementsByClassName('test');

我想不出每次他们关闭叠加层时我需要做的逻辑来遍历该数组以查看所有这些都设置为隐藏时的可见性。如果是，则执行一个函数。如果页面上仍有任何可见的叠加层，则什么也不做。

这是我想出的答案。只是不确定它是否正确。

 var elements = document.getElementsByClassName('test');
 var visiblecounter = 0;
 for (var i = 0; i < elements.length; i++) {
    if(elements[i].style.visibility!='hidden'){
      alert("not hidden");  
      visiblecounter ++;    
     }     
  }
     ​
if(visiblecounter > 0){
    alert("all overlays are closed individually. you can remove close all button");
} 

Answer 1

您提到您正在重用这些叠加层，因此由于您正在汇集叠加层以供重用，我假设您将它们放在一个数组或类似的东西中。而不是检查 DOM（这总是很昂贵）来查看它们是否可见，而是遍历覆盖数组检查 visible attribute，例如：

   var anyVisible = false;
   for (i = 0; i < myOverlays.length; i+=1) {
        anyVisible |= myOverlays[i].cfg.getProperty("visible");
   }

如果其中任何一个可见，请禁用该按钮。

Answer 2

我不确定我是否明白这个问题，但我会尽力提供帮助。以下是我会做的一些事情。我还定义了一个活动类，所以我的 HTML 元素会这样写：

<div class="john active"></div>

我会在我的 css 中编写。

.john {display: none};
.active {display: block};

所以默认情况下对象是隐藏的！但是，当您将“活动”类附加到它时，它会出现在屏幕上。所以现在我们可以做以下魔法了。

$(".hideButton").click(function() {
    $(this).removeClass("active");
});

如果我想隐藏所有其他对象，假设它们在 DOM 中具有相同的父对象

$(".hideOthersButton").click(function() {
    $(this).siblings().removeClass("active");
});

如果我想隐藏所有共享同一个父对象的对象。

$(".hideEverything").click(function() {
    $(".parent").children().removeClass("active");
});

我希望这会有所帮助！如果您需要更多帮助，请告诉我。该解决方案使用 Jquery，但您可以将逻辑重新用于其他任何用途。