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'

我还将 autoHeight 更改为 false...

autoHeight: false