jQuery tree li toggle

Question

我终于设法创建了我的树形网格。我现在遇到的问题是创建一个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

​​

JS

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

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

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