jQueryUI Accordian Menu - Как работать с элементами без подменю - PullRequest
Новая
       5

jQueryUI Accordian Menu - Как работать с элементами без подменю

0 голосов
/ 20 августа 2010

У меня есть вертикальное меню с использованием метода Accordian jQueryUI.Первые два элемента имеют подменю, а остальные нет.У меня также есть событие для «зависания» вместо «щелчка».

Проблема: в том, что при наведении курсора на любой элемент без подменю он скрывает элемент с подменю.Есть ли способ, которым я могу сделать так, чтобы он всегда оставлял хотя бы один элемент с открытым подменю?Или другой способ сказать это: есть ли способ заставить элементы без подменю не сворачивать другие элементы?

Вот пример моего меню ... 

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

Ответы [ 2 ]

0 голосов
/ 22 августа 2010

Я решил эту проблему, изменив параметр заголовка, чтобы он выглядел следующим образом ... 

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

Я также изменил autoHeight на false ... 

autoHeight: false
0 голосов
/ 21 августа 2010

Вы можете иметь два отдельных меню и просто оформить их так, чтобы они выглядели как одно. 

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