Question

我有一个脚本，可以在悬停时激活我的菜单ul元素。它还为ul创建了一个背景元素。我制作了这个剧本：

jQuery(document).ready(function($) {

    $(".main-navigation ul:first > li").hoverIntent({
        sensitivity: 1,
    interval: 100,
    timeout: 400,
    over: function() {
        if ($(this).children().length > 1) {
        $(this).parent().prepend('<div class="sub-nav" style="position: absolute; top: 0px; left: 250px; display: block; opacity: 1;"></div>');
                $(this).children("ul").css({
            "display" : "block",
            "left" : "250px",
            }).stop().animate({
                top: '-50px',
                opacity: 1,
                }, 500)
                }},
    out: function() { 
    $(".sub-nav").remove();
    $(this).children("ul").stop().animate({
                 "top" : "-500px",
                 "opacity": 0,
                    }, 500).css({
                    "display" : "none",
                    })

            }
        })
    });

它工作正常，但一旦我选择低于那个的另一个菜单就会出现问题。所以，我有两个子菜单菜单。如果我选择separetly每一个都一切正常，但如果我选择第一个然后移动到另一个背景元素（.sub-nav）不会出现。

我错过了什么？

JS FIDDLE：http://jsfiddle.net/r8vx07ae/10/（尝试将鼠标从菜单项＃2移动到菜单项＃3）

Answer 1

我不确定这是否是正确的方法，但通过干涉我有点实现我想要的。我做了以下事情：

jQuery(document).ready(function($) {

    $(".main-navigation ul:first li").hoverIntent({
        sensitivity: 1,
    interval: 100,
    timeout: 400,
    over: function() {
        if ($(this).children().length > 1) {
        $(this).parent().prepend('<div class="sub-nav" style="position: absolute; top: 0px; left: 250px; display: block; opacity: 1;"></div>');
                $(this).children("ul").css({
            "display" : "block",
            "left" : "250px",
            }).animate({
                top: '-50px',
                opacity: 1,
                }, 500)
                }}
        })

        .mouseleave(function() {
        $(".sub-nav").remove()
        $(this).children("ul").stop().animate({
                 "top" : "-500px",
                 "opacity": 0,
                    }, 500).css({
                    "display" : "none",
                    })

            })
    });

这解决了我的问题。它就像我想要的那样工作。

JS Fiddle也更新了：http://jsfiddle.net/r8vx07ae/11/

在选择答案之前，我想等待任何人用更好的更干净的解决方案更新它。

jQuery hoverintent创建和删除元素

1 个答案: