0

我有一个包含li集合的div来构建菜单。

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

现在，我了解了整个 mouseout，mouseover 效果，但我坚持的是，如果鼠标移到内容 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？这对我来说没有意义，所以我想如果我把它放在外面，它会起作用。

我的摆弄

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

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

4

1 回答 1

0

If I understand you correctly you want something similar to this: Making the content-window appear and show some specific content based on which menu item is being hovered over and disappearing when you stop hovering over a menu item?

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/

Hope that helps,

R.

Update:

Due to your more specific question update I have amended the code above and updated a jsfiddle as below. What it does now is sets a timeout() timer to remove the content-window after a pre-determined time on a mouseout. This removal is halted if there is another mouseover over an li or the .content-window itself.

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

于 2013-08-18T16:14:32.733 回答