Javascript 我可能有错误的想法吗

我有一个div，其中包含一组li以建立菜单

在包含ul的菜单之外，我有一个div，只有当原始菜单中的项目悬停时才应显示该div

现在，我了解了整个mouseout、mouseover效果，但我一直坚持的是，如果鼠标移动到内容上方，则保持内容div处于活动状态，但如果选择了任何li元素，则隐藏（清除）然后显示

代码（为便于阅读而修剪）

菜单项1


菜单项2


菜单项3


菜单项4


其中包含根据上面导航中悬停的内容显示的文本（模板驱动）

这里重要的不是将在div.content.window中显示的数据，而是如何在设置可见性后向下移动鼠标时保持其打开状态，以及如何在鼠标移动到div.content.window之外或任何导航项上时隐藏它

我想hoverIntent可以做到这一点，但是intent（我已经）没有初始化

我的代码是：

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        'use strict';

        var config = {
            interval: 100,
            sensitivity: 1,
            out: onHoverOut,
            over: onHoverOver
        };

        $("li", $(".navigation")).hoverIntent(config);

    });

    function onHoverOver(parent) {
        'use strict';                     

        var $currentTarget = $(parent.currentTarget),
            $hasTemplate = ($("selector", $currentTarget).length >= 1);

        if ($hasTemplate) {
            onPopulateMenu(parent);
            // show menu
        }
    }

    function onHoverOut(parent) {
        'use strict'

        onClearMenu();
        // TODO: hide the menu
        // I think the problem is here?
    }

    function onClearMenu() {
        'use strict';

        // TODO: clear the menu of all HTML
    }

    function onPopulateMenu(parent) {
        'use strict';

        // TODO: populate the content menu
    }
</script>

jQuery（文档）.ready（函数（$）{
"严格使用",；
变量配置={
间隔时间:100,，
敏感度：1，
出去，出去，
悬停
};
$（.li），$（.navigation”）.hoverIntent（配置）；
});
函数onHoverOver（父函数）{
"严格使用",；
var$currentTarget=$（parent.currentTarget），
$hasTemplate=（$（$selector'，$currentTarget）.length>=1）；
如果（$hasTemplate）{
onPopulateMenu（父项）；
//显示菜单
}
}
函数onHoverOut（父级）{
“严格使用”
onClearMenu（）；
//TODO:隐藏菜单
//我想问题就在这里？
}
函数onClearMenu（）{
"严格使用",；
//TODO:清除所有HTML的菜单
}
函数onPopulateMenu（父级）{
"严格使用",；
//TODO:填充内容菜单
}

我确信我将能够保持一个div处于活动状态，但我似乎无法确定此问题的解决方案。这可能吗

更新

抱歉说得不太清楚

基本上，当用户将鼠标悬停在菜单项上时，将弹出一个超大菜单类型的导航，其中包含用户可以单击的其他链接。我目前的问题是“mega menu”窗口在原始导航中的每个li元素之外，这正是hoverIntent所寻找的

我的问题是，我是否遗漏了什么？因为一旦鼠标光标从li移动到菜单弹出窗口，它就会消失，这不是我想要的功能

菜单窗口是否应嵌入每个li？这对我来说没有意义，所以我想如果我把它放在外面，它会起作用

如上所述，如果光标移离li，我需要窗口保持活动状态，但如果状态在窗口之外，我需要它消失

---

我可以写一些代码来计算光标的位置，看看坐标是否与可接受的位置相对应，然后切换，但这似乎也有点过分？

如果我理解正确的话，您希望类似的东西：使内容窗口出现并显示一些特定的内容，这些内容基于您停止在某个菜单项上悬停和消失的菜单项

jQuery(document).ready(function () {

    timeoutId = false;

    $('.navigation li').on('mouseover', function () {
        //If there is a timeoutId set by a previous mouseout event cancel it so the content-window is not hidden
        if (timeoutId != false) {
            clearTimeout(timeoutId);
        }
        $('.content-window').css('display', 'block');
        $('.content-window .demo-content').html($(this).html());
    });

    $('.navigation li, .content-window').on('mouseout', function () {
        //start a countdown of 3000 milliseconds before removing the content-window
        timeoutId = setTimeout(function () {
            $('.content-window').css('display', 'none');
        }, 3000);
    });

    //if cursor moves over to the content-window, stop the timeout from occuring
    $('.content-window').on('mouseover', function () {
        if (timeoutId != false) {
            clearTimeout(timeoutId);
        }
    });
});

希望有帮助

R

更新：

由于您更具体的问题更新，我修改了上面的代码，并更新了JSFIDLE，如下所示。它现在所做的是设置一个

timeout（）

计时器，以便在

mouseout

上的预定时间后删除内容窗口。如果在

li

或

.content窗口

本身上有另一个

鼠标，则此删除操作将停止

你能为它制作小提琴吗？请更详细地解释一下你想要的效果。请给出用户悬停或离开的具体情况，以及每个操作的预期效果。更新我的问题并将快速处理。几年前，我在一个网站上做了此操作（现在已被替换，我无法再链接到它）。我使用了hoverIntent，因此可以确认您的方法是可行的。我使用了您提到的方法，在
中嵌入了菜单窗口。但是因为这没有意义，我没有为菜单使用
-structure，而是仅使用
:s。类似的内容，但只有当鼠标光标位于li元素以及弹出窗口之外时，它才会消失。如果光标在弹出窗口上，它应该保持固定。因此，您应该按照Rob的建议，在li元素上使用mouseout事件以及弹出窗口$（'.navigation li，#popup'）。on（'mouseout'，function（）{$（'.content window'）。css（'display'，'none'）；}）；
jQuery(document).ready(function () {

    timeoutId = false;

    $('.navigation li').on('mouseover', function () {
        //If there is a timeoutId set by a previous mouseout event cancel it so the content-window is not hidden
        if (timeoutId != false) {
            clearTimeout(timeoutId);
        }
        $('.content-window').css('display', 'block');
        $('.content-window .demo-content').html($(this).html());
    });

    $('.navigation li, .content-window').on('mouseout', function () {
        //start a countdown of 3000 milliseconds before removing the content-window
        timeoutId = setTimeout(function () {
            $('.content-window').css('display', 'none');
        }, 3000);
    });

    //if cursor moves over to the content-window, stop the timeout from occuring
    $('.content-window').on('mouseover', function () {
        if (timeoutId != false) {
            clearTimeout(timeoutId);
        }
    });
});