Question

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

Answer 1

如果用户没有Javascript Embedding extra styles with noscript，请查看此问题。

在那之后我们可以集中精力于mootools。使用Javascript加载页面时，您希望元素具有visability: hidden。为您的元素提供一个类，以便我们可以一次选择它们。初始化元素的示例。

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

现在我们需要处理click事件。同样如此。

示例html：

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

示例html：

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

示例小提琴：http://jsfiddle.net/b4Zjs/

编辑：如果有很多元素应该有点击事件，最好使用事件委派。然后你只是向页面添加一个事件监听器，它可能会产生很大的差异。

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

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

使用mootools Fx.Slide操纵许多滑动对象的最佳方法

1 个答案: