可能我对hoverIntent的想法不正确

Question

我有一个包含li的集合的div ，用于建立菜单。

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

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

代码（为清晰起见而修剪）

<div id="menu-ext" class="ext-menu wrapper">
    <div class="navigation">
        <ul>
            <li>
                Menu Item 1
            </li>
            <li>
                Menu Item 2
            </li>
            <li>
                Menu Item 3
            </li>
            <li>
                Menu Item 4
            </li>
        </ul>
    </div>
    <div class="clear"></div>
    <div class="content window" style="display:none;">
        this contains text to be displayed, based on a what is hoverd in the navigation above (template driven)
    </div>
</div>

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

我想hoverIntent可以做到这一点，但意图（我有）没有初始化。

我的代码：

<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>

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

更新资料

抱歉，不清楚。

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

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

菜单窗口是否应嵌入每个li中 ？ 这对我来说没有意义，所以我认为如果将其放在外面，那会起作用。

我摆弄

如前所述，如果光标从li移开，我需要使窗口保持活动状态，但是如果状态不在窗口内，则需要使窗口消失。

我可以编写一些复杂的JS来找出光标的位置，看看坐标是否与可接受的位置相对应，然后进行切换，但这似乎也有点多余吗？

Answer 1

如果我正确理解您的要求，那么您将需要执行以下操作：使内容窗口显示并显示某些特定的内容，具体取决于您将鼠标悬停在哪个菜单项上并在您停止将其悬停在菜单项上时消失？

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);
        }
    });
});

http://jsfiddle.net/UHTAk/

希望能有所帮助，

R.

更新：

由于您的问题更新更具体，我修改了上面的代码并更新了jsfiddle，如下所示。 现在要做的是设置一个timeout()计时器，以在mouseout上经过预定时间后删除内容窗口。 如果在li或.content-window本身上有另一个mouseover ，则停止删除操作。

http://jsfiddle.net/UHTAk/1/