Question

我在我的导航栏中引入了一个div包装器，名为“flyoutContainer”，如下所示： -

<li id="menu-item-206" class="has-flyout aboutUs menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="#">main link</a><a href="#" class="flyout-toggle"><span> </span></a>
    <div class="flyoutContainer"><!-- ADDED THIS WRAPPER HERE -->
        <ul class="flyout">
            <li id="menu-item-2205" class="threeNav aboutUs itemOne menu-item menu-item-type-post_type menu-item-object-page"><a href="#">sub link 1<br><span class="spannav">desc</span></a></li>
            <li id="menu-item-242" class="threeNav aboutUs itemTwo menu-item menu-item-type-post_type menu-item-object-page"><a href="#">sub link 2<br><span class="spannav">desc</span></a></li>
            <li id="menu-item-224" class="threeNav aboutUs itemThree menu-item menu-item-type-post_type menu-item-object-page"><a href="#">sub link 3<br><span class="spannav">desc</span></a></li>
        </ul>
    </div>
</li>

jQuery如下： -

else {
   $('.nav-bar>li.has-flyout').hover(function() {
     $(this).children('.flyout').show();
    }, function() {
     $(this).children('.flyout').hide();
   });
}

因为我已经添加了这个包装器div代码并没有工作，我认为它是因为它使用$（this）.children和我添加的div包装器阻止它显示/隐藏。

所以我猜测当我将鼠标悬停在主链接上时，我需要显示/隐藏包装div“flyoutContainer”以及“.flyout”

我该怎么做？

由于

Answer 1

好吧，.flyout不再是li.has-flyout的孩子，因为你已经介绍了它们之间的包装......尝试：

$(this).children('.flyoutContainer').children('.flyout').show();
$(this).children('.flyoutContainer > .flyout').show();    // not recommendable
$(this).find('.flyout').show();

或者，您只能使用CSS ...

.nav-bar > li.has-flyout:hover .flyout {
    display: block;
}

悬停弹出菜单不适用于导航子链接

1 个答案: