Question

我有 div ，其中包含 li 的集合，以构建菜单。

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

现在，我理解整个鼠标移除，鼠标悬停效果，但我坚持的是，如果将鼠标移到上面，保持内容 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 处于活动状态，但我似乎无法确定此问题的解决方案。这可能吗？

更新

抱歉不太清楚。

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

我的问题是，我错过了什么吗？因为只要鼠标光标从 li 移向菜单弹出窗口，它就会消失，这不是我正在寻找的功能。

菜单窗口是否应嵌入每个 li ？这对我来说没有意义，所以我想如果我把它放在外面，那就行了。

my fiddling

如上所述，如果光标远离 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上的预定时间之后删除内容窗口。如果mouseover或li本身有另外.content-window，则会停止此移除。

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

可能我对hoverIntent有错误的想法

1 个答案: