javascript - jquery 脚本 : z-index and setTimeout 的两个问题

Question

在网站的左侧有一个侧面菜单。我希望子菜单以简洁的动画向右滑动打开。我已经制作了脚本:

jQuery(document).ready(function($){
    $(".main-navigation ul li").mouseenter(function() {
        if ($(this).children().length > 0) {
            $(this).children("ul").css ({
            "display" : "block",
            }).animate({
                left: '250px',
                opacity: 1,
                }, 500)
            }})
            .mouseleave(function() {
                setTimeout(function() {
                    $(this).children("ul").css({
                    "display" : "none",
                    "left" : "0px",
                    "opacity": 0,
                    }) 
                }, 1000);
            });
});

滑动效果很好。菜单显示得很好。

不过有两个问题。一是菜单 z-index 不起作用。子菜单的 ul 在 css 中设置了一个负索引，但是当它滑动时它会越过主 ul。我希望它在菜单下，所以它不显示。 第二个是，SetTimeout 函数似乎不起作用。一旦鼠标离开该区域，ul 就会永远留在那里。如果没有 Settimeout 函数，它会很好地消失(虽然我希望它立即停留在那里一段时间)。

我做了一个jsfiddle例子 http://jsfiddle.net/r8vx07ae/4/

Answer 1

z-index 的问题:

元素不能出现在其父元素之后。由于子菜单作为菜单的子元素存在，它不会出现在菜单后面，z-index实际上只适用于共享同一父元素的两个元素。

setTimeout 的问题:

问题很可能是因为 this 变量在超时发生时超出了范围。这有一个简单的解决方法:创建一个全局变量(比如 subMenu)并在超时发生之前设置 subMenu = this 并将 this 替换为 subMenu你的超时功能。如果您有多个子菜单，则可以使用其他变量或字典/数组，以防止在两个子菜单一个接一个打开时变量被覆盖