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

我不确定我是否得到了这个问题，但我会尽力帮助。这是我要做的一些事情。我还定义了一个活动类，因此我的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，但您可以将逻辑重新用于其他任何内容。

Answer 2

你提到你正在重复使用这些叠加层，所以因为你将叠加层用于重用，我假设你将它们放在一个数组或类似的东西中。而不是检查DOM（总是很昂贵）以查看它们是否可见，循环遍历覆盖数组，检查visible attribute，如：

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

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

如果所有叠加层都关闭，则执行函数

2 个答案: