javascript - 使用 moo 工具的 Fx.Slide 操纵许多滑动对象的最佳方式

Question

我正在尝试想出最优雅的解决方案来处理 mootools 中的多个 Fx.Slides。我正在开发一个字典页面，其中有一个很长的单词列表，其中有一对单词 - 翻译，默认情况下所有翻译必须隐藏，仅显示单词列表。我正在寻找一种解决方案，不需要为页面上的每个单词创建单独的幻灯片，以便在访问者单击某个单词时即时创建它们，因为脚本的大小和性能会受到影响关心我。还有另一个问题，它们的初始状态必须事先设置为“隐藏”，而我不想在 CSS 中这样做(这会对浏览器不支持 JavaScript 的人隐藏所有内容)。 这种类型的事情是否可能，或者我必须依赖于循环创建幻灯片(我的元素 ID 像 w01、w02，...)？如果是这样，我如何将该 block 放入循环中？

Answer 1

查看这个关于用户是否没有 Javascript 的问题 Embedding extra styles with noscript .

处理完之后我们就可以专注于 mootools 了。当您使用 Javascript 加载页面时，您希望元素具有 visibility:hidden 。给你的元素一个类，这样我们就可以一次选择它们。初始化元素的示例。

$$('.sliders').each(function(el) {
    el.slide('hide').setStyle('visibility', 'visible');
});

现在我们需要处理点击事件。这里也是如此。

示例 html:

<h3 class="slideIn" >Some title</h3>
<div class="sliders>Some lengthy text<div>

示例 html:

$$('.slideIn').addEvent('click', function() {
    this.getNext().getChildren('.sliders').slide();
});

​ fiddle 示例:http://jsfiddle.net/b4Zjs/

编辑:如果有很多元素应该有点击事件，最好使用事件委托(delegate)。然后，您只需向页面添加一个事件监听器，有时它会产生巨大的差异。

$('parent').addEvent('click:relay(h3.slideIn)', function(event, target) {
   target.getNext().getChildren('.sliders').slide();
});

jsFiddle 示例:http://jsfiddle.net/b4Zjs/2/