jQueryUI Accordian Menu - 하위 메뉴가없는 항목을 처리하는 방법

Question

jQueryUI의 Accordian 메소드를 사용하여 세로 메뉴가 있습니다. 처음 두 항목에는 하위 메뉴가 있고 나머지 항목에는 하위 메뉴가 없습니다. 또한 '클릭'대신 '마우스를 올려 놓기'로 설정된 이벤트가 있습니다.

문제 :은 하위 메뉴가없는 항목 위로 마우스를 가져 가면 하위 메뉴가있는 항목을 숨 깁니다. 하위 메뉴가 열려있는 항목을 적어도 하나 이상 유지하도록 할 수있는 방법이 있습니까? 또는 다른 말로 표현하면 하위 메뉴가없는 항목이 다른 항목을 축소하지 않도록 할 수 있습니까?

여기

<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

당신은 두 개의 별도의 메뉴가 있고, 그냥 하나처럼 보이도록 스타일을 수 ... 내 메뉴의 예입니다.

<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

내가 같이 할 수있는 헤더 옵션을 변경하여이 문제를 해결

...

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

나는 또한 false로 autoHeight를 변경 ...

autoHeight: false