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

jQuery UI Accordion Menu - 如何处理没有子菜单的项目

2 个答案: