使用Moo工具的Fx.Slide處理許多滑動對象的最佳方法

Question

我正在嘗試考慮在mootools中處理多個Fx.Slides的最優雅的解決方案。 我正在開發一個詞典頁面，其中包含很長的單詞列表，其中有一對單詞-翻譯，默認情況下所有翻譯都必須隱藏，僅顯示單詞列表。 我正在尋找一種解決方案，該解決方案不需要為頁面上的每個單詞創建單獨的幻燈片，以便在訪問者點擊某個單詞時即時創建它們，因為腳本的大小和性能會受到影響關心我 還有一個問題是，它們的初始狀態必須事先設置為“隱藏”，而我不想在CSS中進行設置（這會隱藏所有不支持JavaScript的瀏覽器的用戶）。 有這種可能性嗎？還是我必須依靠循環創建幻燈片（我的元素ID像w01，w02等）？ 如果是這樣，我將如何將該塊放入循環中？

Answer 1

查看有關用戶是否沒有使用noscript嵌入額外樣式的 Javascript的問題。

在此之后，我們可以專注於mootools。 您希望元素具有visability: hidden使用Java visability: hidden加載頁面時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/