Question

我正在从jQuery转移到MooTools（为了好玩..）我有这行代码：

$subMenus = $headMenu.find('li ul.sub_menu:visible');

我怎样才能在mootools中写这个？我知道我可以使用getElements但是如何检查可见的ul？（我经常使用这个（：可见）选择器。）

编辑 -

我实现了自己的功能：

  function findVisibleElements(elementsCollection){
    var returnArray = [];
    elementsCollection.each(function(el){
      if(el.getStyle('display') === 'block'){
        returnArray.push(el);
      }
    });

    return returnArray;
  }

我想要的是向上滑动所有可见的子菜单，这就是我写的：

// Sliding up the visible sub menus 
if( visibleSubMenus.length > 0 ){
  visibleSubMenus.each(function(el){
      var slider = new Fx.Slide(el, {duration: 2000});
      slider.slideOut();
  });
}

为什么我的代码不起作用？我的功能正在运行，问题在于Fx.Slide。
我用Fx.Slide添加了更多的mootools。

Answer 1

只需扩展选择器功能 - 它就是MooTools！

$extend(Selectors.Pseudo, {
    visible: function() {
        if (this.getStyle('visibility') != 'hidden' && this.isVisible() && this.isDisplayed()) {
            return this;
        }
    }
});

之后只需执行通常的$$('div:visible')，它将返回可见的元素。

查看我创建的示例：http://www.jsfiddle.net/oskar/zwFeV/

Answer 2

Mootools中的$$()函数大部分等同于JQuery的$()全部选择器。

// in MooTools
var elements = $$('.someSelector');

// natively in most newer browsers
elements = document.body.querySelectorAll('.someSelector');

但是，对于这种特殊情况，因为：visible不是真正的伪类，你必须使用Mootools中的数组过滤器来近似它。

var isItemVisible = function (item) {
    return item.style.visibility != 'hidden' && item.style.display != 'none';
}
var elements = $$('ul').filter(isItemVisible);

您可能会考虑将其他内容设为“不可见”，在这种情况下，您可以相应地将它们添加到过滤功能中。

使用MooTools获取所有可见元素

编辑 -

2 个答案: