Question

虽然有很多类似的问题我找不到与我正在寻找的特定情况有关的任何内容。

我有一个带有子导航的wordpress网站，在悬停时显示并使用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);

任何建议都将不胜感激！

Answer 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);                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
}

这当然只是一个建议，还有其他方法可以做到这一点我已更新the fiddle。希望这可以帮助。

在子页面上保持子菜单打开，如果将鼠标悬停在另一个项目上则更改，然后返回

1 个答案: