0

我在页面顶部的横幅上有一个按钮，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");
}
4

2 回答 2

0

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

于 2012-10-24T01:19:08.827 回答
0

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

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

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

于 2012-10-24T14:22:44.363 回答