不工作的導航哈弗彈出菜單子鏈路

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包裝阻止它顯示/隱藏。

所以即時猜測，當我將鼠標懸停在主鏈路我需要顯示/隱藏包裝格「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; 
}