0

同様の質問はたくさんありますが、私が探している特定のケースでは何も見つかりません。

ホバー時に表示され、HoverIntent でアニメーション化されるサブナビゲーションを備えたワードプレス サイトがあります。これは問題なくうまく機能しますが、子ページのいずれかにある場合はサブメニューをアクティブのままにしたいと思います-ただし、他の親アイテムにカーソルを合わせると、そのサブメニューを表示したい-何もない場合元のサブメニューの表示に戻したい。

ここに私のメニューがあります：

<div class="menu-main-navigation-container">
<ul id="menu-main-navigation" class="menu">

<li id="menu-item-90" class="menu-item-90"><a href="http://sitename.com/services/">Services</a>
    <ul class="sub-menu">
        <li id="menu-item-123" class="menu-item-123"><a href="http://sitename.com/services/design/">Desgign</a></li>
        <li id="menu-item-109" class="menu-item-109"><a href="http://sitename.com/services/seo/">SEO</a></li>
        <li id="menu-item-110" class="menu-item-110"><a href="http://sitename.com/services/development/">Development</a></li>
    </ul>
</li>

<li id="menu-item-89" class="menu-item-89"><a href="http://sitename.com/portfolio/">Portfolio</a>
    <ul class="sub-menu">
        <li id="menu-item-113" class="menu-item-113"><a href="http://sitename.com/portfolio/web/">Web</a></li>
        <li id="menu-item-108" class="menu-item-108"><a href="http://sitename.com/portfolio/print/">Print</a></li>
    </ul>
</li>

</ul>
</div>

そして私の現在のjQueryコード：

// hover intent
var config = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 10, // number = milliseconds for onMouseOver polling interval
over: doOpen, // function = onMouseOver callback (REQUIRED)
timeout: 500, // number = milliseconds delay before onMouseOut
out: doClose // function = onMouseOut callback (REQUIRED)
};

function doOpen() {
    jQuery(this).addClass("hover");
    jQuery('ul:first',this).fadeIn();
}
function doClose() {
    jQuery(this).removeClass("hover");
    jQuery('ul:first',this).fadeOut();
}
jQuery("#menu-main-navigation li").hoverIntent(config);

どんな提案でも大歓迎です！

4

1 に答える 1

1

その場合: 必要なのは、自分がどのページにいるかを知ることです。
「ウェブ」ページにいるとしましょう。
追加: <div id='page_web'></div>
ページの先頭に。

次に、JSで：

if ($('#page_web').length > 0){
  jQuery("#menu-main-navigation li:first").hoverIntent(config);
} else {  
  jQuery("#menu-main-navigation li").hoverIntent(config);                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
}

もちろん、これは単なる提案であり、これを行う他の方法があります。フィドル
を更新しました。お役に立てれば。

于 2012-10-02T21:11:14.013 に答える