JQuery tree li toggle

Question

Мне удалось создать мою сетку деревьев. Проблема im имеет создание функции JQuery для открытия месяца и лет отдельно. ИТАК дерево выглядит так

<ul> 
    <li class="year"><a> 2013</a> 
     <li class="month">January 
      <li>test</li> 
      <li>test</li> 
      <li>test</li> 
      <li>test</li> 
      <li>test</li> 
      <li>test</li> 
      <li>test</li> 
     </li> 
     <li class="month">February 
      <li>test</li> 
      <li>test</li> 
      <li>test</li> 
      <li>test</li> 
      <li>test</li> 
      <li>test</li> 
      <li>test</li> 
     </li> 
</ul> 

Таким образом, код, который я сумел переключить год элемент является

$('li:not(".year")').hide(); 

$('.year').click(
    function(){ 
     $('li:not(".year")').slideUp(); 
     $(this).nextUntil('.year').slideDown(); 
    }); 

Который, когда закрыл это хорошо, но когда я переключить его открывает месяцы, а также.

Может ли кто-нибудь помочь мне в функции только для того, чтобы открыть годы, после чего пользователь должен щелкнуть, чтобы открыть каждый месяц?

Answer 1

Попробуйте эту скрипку: http://jsfiddle.net/F7f8N/

HTML (исправленный)

<ul> 
    <li class="year"><a> 2013</a> 
     <ul> 
      <li class="month">January 
       <ul> 
        <li> test </li> 
        <li> test </li> 
        <li> test </li> 
        <li> test </li> 
        <li> test </li> 
        <li> test </li> 
        <li> test </li> 
       </ul> 
      </li> 
      <li class="month">February 
       <ul> 
        <li> test </li> 
        <li> test </li> 
        <li> test </li> 
        <li> test </li> 
        <li> test </li> 
        <li> test </li> 
        <li> test </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

CSS

li{ 
    display: none; 
} 
li.year{ 
    display: block; 
} 

JS

$('li').click(function(e){ 
    if($(this).find('>ul').hasClass('active')){ 
     $(this).children('ul').removeClass('active').children('li').slideUp(); 
     e.stopPropagation(); 
    } 
    else{ 
     $(this).children('ul').addClass('active').children('li').slideDown(); 
     e.stopPropagation(); 
    } 
}); 

Answer 2

Попробуйте этот путь JSFIDDLE

HTML

<ul> 
    <li> 
     <a class="year" href="#">2013</a> 
     <ul> 
      <li> 
       <a class="month" href="#">January</a> 
       <ul> 
        <li>test</li> 
        <li>test</li> 
        <li>test</li> 
        <li>test</li> 
        <li>test</li> 
        <li>test</li> 
        <li>test</li> 
       </ul> 
      </li> 
      <li> 
       <a class="month" href="#">February</a> 
       <ul> 
        <li>test</li> 
        <li>test</li> 
        <li>test</li> 
        <li>test</li> 
        <li>test</li> 
        <li>test</li> 
        <li>test</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

JS

$('ul:gt(0) li').hide(); 

$('.year').click(function() { 
    $('.month').parent().slideToggle(); 
}); 

$('.month').click(function() { 
    $(this).parent().find('ul li').slideToggle(); 
});