Mootools幻燈片在下拉菜單中不起作用

Question

我有一個使用mootools的帶有下拉菜單的html5頁面。 如果我使用hide（）和show（）函數，則可以正常工作。 但是，我希望菜單可以像這樣滑入和滑出：

var m        = e.getElement(".dropdown-menu, .sidebar-dropdown-menu");

if (e.hasClass('active')) {

    m.hide();
    e.removeClass('active');

} else {

    m.show();
    e.addClass('active');
}

而不是隱藏和顯示，我需要slideIn和slideOut：

var m    = new Fx.Slide(e.getElement(".dropdown-menu, .sidebar-dropdown-menu"));
if (e.hasClass('active')) {

    m.slideOut();
    e.removeClass('active');

} else {

    m.slideIn();
    e.addClass('active');
}

工作示例： http : //jsfiddle.net/wzzeZ/

無法正常使用： http ： //jsfiddle.net/37V53/1/

這不是在拋出錯誤； 我應該在哪里修復它？

Answer 1

這里發生了一些事情。

首先，您不會看到任何錯誤，因為沒有錯誤。 如果用console.log（）調用亂碼，它們都會運行。

這是一個樣式問題，導致菜單無法顯示。

Mootools中的FX.Slide類似乎並未明確設置要滑動以block的元素的'display'屬性。 您仍然需要調用.show()使其起作用。

接下來，如果您查看FX.Slide的文檔 ，您會注意到它創建了一個包裝元素來執行幻燈片效果（高度動畫，溢出：隱藏等需要容器）

不幸的是，這似乎使菜單的位置混亂，菜單的位置相對於其包含元素-但包含元素具有高度和溢出：隱藏的樣式隨后隱藏了菜單（更不用說，即使您可以看到它，在正確的位置）。

要查看我在說什么，請在此處查看此更新的Fiddle： http : //jsfiddle.net/37V53/2/

如果運行在Firefox使用Firebug，你將光標懸停多數民眾贊成登錄到控制台的元素，你會看到螢火蟲的藍色高亮顯示實際顯示你的元素，其中-在窗口的中間，從視圖中隱藏。

這是您在互相配合使用的MooTools類中做出的假設的組合； 使用FX.Tween而不是FX.Slide編寫自己的（簡單）滑出腳本可能會更好。

我基於原始的Fiddle（有效）創建了一個示例，該示例如何進行-http: //jsfiddle.net/LkLgk/

技巧是向瀏覽器而不是用戶顯示元素（通過將visibility: hidden設置為visibility: hidden在display: block之前visibility: hidden display: block ，抓取高度，將height設置為1px ，將visibility設置為visible ，然后將高度調整為先前檢測到的值。

希望能為您指明正確的方向； 記住，如有疑問，請console.log一切！