javascript - 没有 jQuery 的延迟下拉菜单

Question

你知道那里有任何用纯 javascript 编写但不依赖 jQuery 的下拉菜单脚本吗？

我知道如何用 CSS 来实现这一点，但我还想添加一个漂亮的淡入淡出效果，让它在鼠标离开菜单后等待 1 秒，如果鼠标没有回到菜单区域内，则关闭它.

我想我可以使用 CSS“transition”属性实现淡入淡出效果，但我不知道如何在 mouseOut 上添加延迟

Answer 1

我喜欢这个，它只有 1.2 KB，代码修改简单：

http://www.scriptiny.com/2008/11/drop-down-menu/

您可以通过修改“t”变量来更改时间。

Answer 2

您可以使用transition-delay-property 并执行以下操作：

• 当用户进入菜单时删除“延迟类”
• 当用户离开菜单时添加“延迟类”

见：https ://developer.mozilla.org/en/CSS/transition-delay

或者你可以这样做（注意：只是伪代码）：

var timer       = null;

function onenter() {
    showSubMenu();
    clearTimeout(timer);
    timer = null;
}

function onleave() {
    overMenu = false;
    timer    = setTimeout( function () { hideSubMenu(); } , 1000 );
}