Menu jQueryUI Accordian - Comment traiter les éléments sans sous-menus

Question

J'ai un menu vertical utilisant la méthode Accordian de jQueryUI. Les deux premiers éléments ont des sous-menus et les autres ne le font pas. J'ai également défini l'événement sur 'hover' au lieu de 'click'.

Le problème: est que lorsque vous survolez l'un des éléments sans sous-menus, il cache celui avec un sous-menu. Y a-t-il un moyen de le faire afin qu'il garde toujours au moins un élément avec un sous-menu ouvert? Ou une autre façon de dire ceci: existe-t-il un moyen de forcer des éléments sans sous-menus à ne pas réduire d'autres éléments?

Voici un exemple de mon menu ...

<ul class="nav" id="menu_left"> 
    <li class="expand"><a href="/category" class="current head">products</a> 
     <ul> 
      <li class="top png first"></li> 
      <li><a href="/category/523">Category</a></li> 
      <li><a href="/category/428" >Category</a></li> 
      <li><a href="/category/498">Category</a></li> 
      <li class="space"><div></div><a href="/category/507">Category</a></li> 
      <li><a href="/category/">Category</a></li> 
      <li><a href="#">Category</a></li> 
      <li><a href="#">Category</a></li> 
      <li class="space"><div></div><a href="#">Category</a></li> 
      <li><a href="#">Category</a></li> 
      <li class="bottom png"></li> 
     </ul> 
    </li> 
    <li class="expand"><a href="/category/">custom</a> 
     <ul> 
      <li class="top png first"></li> 
      <li><a href="/category">Category</a></li> 
      <li class="space"><div></div><a href="/category/428" >Category</a></li> 
      <li><a href="/category/498">Category</a></li> 
      <li class="bottom png"></li> 
     </ul> 
    </li> 
    <li><a href="javascript:void(0);" class="head" >Contact</a></li> 
    <li><a href="javascript:void(0);" class="head">Blog</a></li> 
    <li><a href="javascript:void(0);" class="head">Feature</a></li> 
</ul> 

$('#menu_left').accordion({ 
    active: 0, 
    autoHeight: true, 
    animated: 'slide', 
    event: 'mouseover', 
    header: "> li > :first-child,> :not(li):even", 
    collapsible: false, 
    navigationFilter: function() { 
     return this.href.toLowerCase() == location.href.toLowerCase(); 
    } 
}); 

Answer 1

Vous pourriez avoir deux menus séparés, et le style juste pour ressembler à un.

<ul class="nav" id="menu_left"> 
    <li class="expand"><a href="/category" class="current head">products</a> 
    <ul> 
     ... 
    </ul> 
    </li> 
    <li class="expand"><a href="/category/">custom</a> 
    <ul> 
     ... 
    </ul> 
    </li> 
</ul> 
<ul class="nav"> 
    <li><a href="javascript:void(0);" class="head" >Contact</a></li> 
    <li><a href="javascript:void(0);" class="head">Blog</a></li> 
    <li><a href="javascript:void(0);" class="head">Feature</a></li> 
</ul> 

$('#menu_left').accordion({ 
    ... 
}); 

Answer 2

Je résolu ce problème en changeant l'option d'en-tête pour ressembler à ceci ...

header: '> li.expand > :first-child,> :not(li):even' 

J'ai aussi changé autoHeight false ...

autoHeight: false