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