Javascript Mootools幻灯片在下拉列表中不工作

我有一个html5页面，带有使用mootools的下拉菜单。如果我使用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');
}

我要的不是隐藏和显示，而是幻灯片输入和幻灯片输出：

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');
}

工作示例：

不工作：

---

这不是抛出错误；我应该在哪里修复它呢？

这里有一些问题

首先，您没有看到任何错误，因为没有错误。如果将代码与console.log（）调用混在一起，它们都会运行

这是一个妨碍菜单显示的样式问题

Mootools中的

FX.Slide

类似乎没有明确设置要滑动到

块的元素的“display”属性。您仍然需要调用
.show（）
，它才能工作

接下来，如果您签出，您会注意到它创建了一个包装器元素来执行幻灯片效果（高度动画、溢出：隐藏等需要容器）

不幸的是，这似乎干扰了菜单的定位，菜单的定位相对于其包含元素而言，但包含元素具有高度和溢出：隐藏样式会隐藏菜单（更不用说，即使您可以看到它，它也在正确的位置）

要了解我在说什么，请查看此更新的小提琴：

如果你在Firefox中运行Firebug，你将光标悬停在登录到控制台的元素上，你会看到Firebug的蓝色HeLink出现在你的元素实际上<>强> >显示在窗口的中间，并且隐藏在视图中。
这是在您使用的MooTools类中所做的假设的组合，这些假设相互对立；使用
FX.Tween
而不是
FX.slide
编写自己的（简单的）幻灯片脚本可能会更好

我创建了一个如何在原小提琴的基础上做到这一点的示例（有效）——

诀窍是将元素显示给浏览器，而不是用户（通过在
显示：block
之前设置
可见性：hidden
，抓取高度，将
高度设置为
1px
，
可见性设置为
可见，然后将高度设置为之前检测到的值

希望这能为您指明正确的方向；记住，当您有疑问时，
console.log
一切！
谢谢，这是一个巨大的帮助！我会看看我能走多远。可惜这需要所有这些努力；在jQuery中这更容易。我知道，对吧？我今年早些时候换了。我仍然错过了MT中的一些课程内容，但在习惯了jQuery之后y、 它真的简化了很多事情。祝你好运：）我尝试了更多，并得到了一些奇怪的错误（列表项目完全出现在幻灯片之前）。不是在JSFIDLE中，而是在FF中。不想被这些事情打扰；我将坚持隐藏/显示。谢谢你的努力！