Question

我有一个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');
}

而不是隐藏和显示我想要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()才能使其正常工作。

接下来，如果你查看docs for FX.Slide，你会注意到它创建了一个包装元素来执行幻灯片效果（高度动画需要容器，溢出：隐藏等）

不幸的是，似乎是在弄乱菜单的位置，它相对于其包含元素定位 - 但是包含元素有高度和溢出：隐藏的样式然后隐藏菜单（更不用说，即使你可以看到它，它在正确的地方）。

要查看我正在谈论的内容，请在此处查看此更新的小提琴：http://jsfiddle.net/37V53/2/

如果你在Firefox中使用Firebug运行它，并将光标悬停在登录到控制台的元素上，你会看到Firebug的蓝色hilight出现在你的元素显示的位置 - 在窗口的中间，隐藏在视野之外。

这是您正在使用的MooTools类中所做的假设的组合;使用FX.Tween而不是FX.Slide编写自己的（简单）幻灯片脚本可能会更好。

我根据原始小提琴创建了一个如何执行此操作的示例（可行） - http://jsfiddle.net/LkLgk/

Trick是向浏览器而不是用户显示元素（通过在visibility: hidden之前设置display: block，抓住高度，将height设置为1px，{{ 1}}返回visibility，然后将高度补间到先前检测到的值。

希望指出你正确的方向;记住，当有疑问时，visible一切！

Mootools在下拉列表中滑动不起作用

1 个答案: