代码之家 › 专栏 › 技术社区 › 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);

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

推荐文章

beingalex · 全局作用域-在触发事件侦听器后访问“this”

11 年前

psycho brm · jQuery.no用户脚本中的冲突奇怪行为,仅在Firefox中

11 年前

SaurabhLP · slideIn after slideOut in模拟工具1.1

12 年前

Zed · 奇数和偶数元素的事件处理程序

12 年前

Dimitri Vorontzov · 使用MooTools平滑淡入整个网页

12 年前

niux · jQuery与MooTools冲突

12 年前

Jacob George · 引用(而不是复制)一个类作为另一个类的成员-Mootools

12 年前

Eclectic · Mootools getElements(“input[type=radio]”)返回Object not Array[closed]

12 年前

user1344851 · window.close();javascript代码不适用于chrome

12 年前

Lennart · 使用javascript强制下载

12 年前