javascript - hoverIntent について間違った考えを持っているかもしれません

Question

メニューを構築するためのliのコレクションを含むdivがあります。

含まれている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>

1 つのdivをアクティブに保つことができると確信していますが、この問題の解決策を特定できないようです。これは可能ですか？

アップデート

あまり明確ではないことをお詫びします。

基本的に、ユーザーがメニュー項目にカーソルを合わせると、メガメニュー タイプのナビゲーションがポップアップし、ユーザーがクリックできる追加のリンクが表示されます。私の現在の問題は、「メガメニュー」ウィンドウが元のナビゲーションの各li要素の外側にあることです。これは、hoverIntent が探しているものです。

ここでの私の質問は、何か不足していますか? マウスカーソルがliからメニューポップアップに向かって移動するとすぐに消えるため、これは私が探している機能ではありません。

メニュー ウィンドウを各liに埋め込む必要がありますか? これは私には意味がないので、外に置けばうまくいくと思いました。

私のいじり

述べたように、カーソルがliから離れた場合はウィンドウをアクティブのままにする必要がありますが、状態がウィンドウの外にある場合はウィンドウを非表示にする必要があります。

カーソルの位置を把握し、座標が受け入れられた場所と一致するかどうかを確認してから切り替えるために、いくつかの強力な JS を書くことができますが、これも少し過剰に思えますか?