0

我有一个使用 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/

它不是抛出错误；我在哪里寻找修复它？

4

1 回答 1

1

这里发生了一些事情。

首先，您没有看到任何错误，因为没有。如果你用 console.log() 调用乱扔代码，它们都会运行。

这是阻止菜单显示的样式问题。

Mootools 中的FX.SlideClass 似乎没有明确设置您要滑动到的元素的“显示”属性block。您仍然需要调用.show()它才能工作。

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

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

要了解我在说什么，请在此处查看此更新的 Fiddle：http: //jsfiddle.net/37V53/2/

如果您在带有 Firebug 的 Firefox 中运行它，并将光标悬停在记录到控制台的元素上，您将看到 Firebug 的蓝色亮点出现在您的元素实际显示的位置 - 在窗口中间，并且从视图中隐藏.

这是您正在使用的 MooTools 类中的假设组合；使用FX.Tween而不是FX.Slide.

我创建了一个基于原始小提琴（有效）的示例 - http://jsfiddle.net/LkLgk/

技巧是将元素显示给浏览器而不是用户（通过设置visibility: hiddenbefore display: block，抓取高度，设置height为1px，visibility返回visible，然后将高度补间到先前检测到的值。

希望能为您指明正确的方向；记住，当有疑问时，console.log一切！

于 2012-12-03T15:47:43.083 回答