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

JQuery树li切换

2 个答案: