代码之家 › 专栏 › 技术社区 › Yosi

使用MooTools获取所有可见元素

css-selectors mootools javascript

Yosi · 技术社区 · 14 年前

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

我怎么能用mootools写这个呢?

编辑-

我实现了自己的功能:

  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();
  });
}

为什么我的代码不起作用?我的功能正常,问题是特效幻灯片.
我添加了更多的工具特效幻灯片.

2 回复 | 直到 14 年前

Oskar Krawczyk 14 年前

只需扩展选择器功能-这是一个工具!

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

之后就照常做 $$('div:visible') 它将返回可见的元素。

http://www.jsfiddle.net/oskar/zwFeV/

sevenflow 14 年前

这个 $$() 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);

您可能会考虑使用其他方法使项“不可见”,在这种情况下,您可以相应地将它们添加到筛选函数中。

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前