JQuery树li切换

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

尝试这种方式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();
});

Answer 2

试试这个小提琴： 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();
    }
});