jQueryUI Accordian菜單 - 如何處理沒有子菜單的項目

我有一個使用jQueryUI的Accordian方法的垂直菜單。前兩項包含子菜單，其餘則不包含。我也將事件設置爲'懸停'而不是'點擊'。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(); 
    } 
});

來源

2010-08-20 Chad

你可以有兩個不同的菜單，只是樣式它看起來像一個。

<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({ 
    ... 
});

來源

2010-08-20 20:03:33

我通過改變頭選項看起來像這樣解決了這個...

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

我也改變autoHeight假...

autoHeight: false

來源

2010-08-22 13:02:16 Chad

jQueryUI Accordian菜單 - 如何處理沒有子菜單的項目

回答

相關問題