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

Question

我在名为“flyoutContainer”的导航中的子菜单周围引入了一个 div 包装器，如下所示:-

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