1

JQuery HoverIntent を使用してメニューを作成しています。

私のHTMLコードの基本的な構造は次のとおりです。

<ul>
    <li><a href="#" class="current">Home</a></li>
    <li id="sh-zone-menu-sub-services" class="submenu"><a href="#">Services</a></li>
    <li id="sh-zone-menu-sub-support" class="submenu"><a href="#">Support</a></li>
    <li id="sh-zone-menu-sub-contact" class="submenu"><a href="#">Contact</a></li>
    <li><a href="#">About Us</a></li>
</ul>
<div id="sh-zone-menu-sub-services-target" class="submenu-content">Services Content</div>
<div id="sh-zone-menu-sub-support-target" class="submenu-content">Support Content</div>
<div id="sh-zone-menu-sub-contact-target" class="submenu-content">Contact Content</div>

JQueryコードは次のとおりです。

var $_ = jQuery;
$_(document).ready(function(){  

    function showSubMenu()
    {
        var source_id = $_(this).attr("id");
        $_(this).addClass("showsubmenu");
        $_("#"+source_id+"-target").show();
    }

    function hideSubMenu()
    {
        var source_id = $_(this).attr("id");
        $_(this).removeClass("showsubmenu");
        $_("#"+source_id+"-target").hide();
    }

    var subMenuConfig = 
    {
        interval: 100,
        sensitivity: 4,
        over: showSubMenu,
        timeout: 300,
        out: hideSubMenu 
    };

    $_("ul li.submenu").hoverIntent(subMenuConfig);
});

すべて正常に動作しますが、メニュー コンテンツが表示され、その上にカーソルを合わせようとすると、消えてしまいます。

HTML コードが以前に構成された方法では、サブメニュー コンテンツの DIV が LI タグ内にネストされていました。これは、メニュー リンクとコンテンツのホバーで正常に機能しました。ただし、IE の配置に問題があったため (メニュー コンテンツがページの大部分にまたがるため)、LI タグからそれらを取り除く必要がありました。

私が今持っている方法は、IE（CSSの位置ごと）では問題なく機能しますが、hoverIntentは機能していません。

メニュー コンテンツが LI タグ内にネストされていない場合に hoverIntent を使用する方法はありますか?!

ありがとう。

4

1 に答える 1

1

少し前にこの質問を投稿したことは知っていますが、hoverIntent プラグインの経験は限られていますが、コードを見てわかったことは次のとおりです。mouseenter および mouseleave イベントは、hoverIntent をバインドするオブジェクトにバインドされます。オブジェクトにバインドする hoverIntent のコードは次のとおりです。

return this.bind('mouseenter', handleHover).bind('mouseleave', handleHover);

したがって、ul を lave して、li 要素にバインドすると、次のようになります。

$("ul#ReportNav li").hoverIntent(config);

ポップアップが発生した後 (ul からより多くの要素を表示)、ポップアップにカーソルを合わせても mouseleave イベントは発生しません。これは、ポップアップ内のすべての要素が ul の子であるためです。

だから...あなたが言うなら...ホバートリガーとして内部にdivを持つdivラッパー、正しい構文でhoverIntentをバインドするだけでうまく動作します（ポップアップ内のすべてがホバーされたの子ですエレメント）：

<div id="ListContainer">
<div id="ListTableContainer">
<!-- anything you want -->
</div>
</div>

$("div#ListContainer div#ListTableContainer").css({ 'opacity': '0' });
$("div#ListContainer").hoverIntent(config);

私は似たようなものを探していて、この質問に出くわしました。私はそれに答えるだろうと思った。

于 2011-08-06T13:19:06.463 に答える