jQuery用divs层次结构切换

Question

我正在使用“层次结构”处理任务列表（请参阅下面的示例）：

<div class="holder">
    <div class="element">
        Element #1
    </div>

    <div class="elements">
        <div class="holder">
            <div class="element">
                Element #2
            </div>

            <div class="elements">
                <div class="holder">
                    <div class="element">
                        Element #3
                    </div>

                    <div class="elements">
                         <!-- empty -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

使用以下jQuery代码：

$('div.element').click(function(){

    $(this)
    .closest('div.holder')
    .find('div.elements')
    .eq(0)
    .toggle();
});

问题：

正如它应该的那样打开和关闭div.elements，但是例如，如果我打开所有div's，并关闭Element #1 div - 我想关闭每一个其他div.elements内部点击了div.holder。

添加fiddle。

Answer 1

Working Demo

检查此代码段，

您也需要隐藏子元素，并单击父元素。

$('div.element').click(function () {

    $(this)
        .closest('div.holder')
        .find('div.elements')
        .eq(0)
        .toggle('fast',function () {
           $(this).find('div.elements').hide()
    });
});

Answer 2

$('div.element').click(function(){

    $('div.elements').hide();

    $(this)
    .closest('div.holder')
    .find('div.elements')
    .show();
});