可能我對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/