表格行展开折叠jquery答案

【问题标题】：Table row exapnd collapse jquery表格行展开折叠jquery
【发布时间】：2013-10-08 03:03:53
【问题描述】：

我有一个如下所示的展开/折叠嵌套表结构。在这里，当我单击父级时，该级别的所有其他先前展开的父级必须折叠其子级。

最初应用程序（1）被扩展，有 2 个孩子（图 1）。当我单击 Application(2) 时，Application(1) 的子项必须折叠（图 2）。这应该适用于所有级别。像找到兄弟姐妹并隐藏之类的东西，但点击的除外。我该怎么做呢

siblings().find().not(clicked).hide();

这是我的小提琴http://jsfiddle.net/vivekcek/rFKJc/

父行有一个类 'parent' 和 id='[id]'。子行通过附加父 id class=child-[id] 来拥有一个类。

 $('tr.parent')
.css("cursor", "pointer")
.attr("title", "Click to expand/collapse")
.click(function () {
$(this).siblings('.child-' + this.id).toggle();
});
$('tr[class*=child-]').hide().children('td');

【问题讨论】：

'$(this).siblings('.child-').not($(this)).hide();'我试过了，但没有用
当点击父子时也不会折叠

标签： jquery html

【解决方案1】：

试试

var $trs = $('tr.parent')
.css("cursor", "pointer")
.attr("title", "Click to expand/collapse")
.click(function () {
    var $sibs = $(this).siblings('.child-' + this.id).toggle();
    $(this).siblings().not($sibs).not('.parent').hide()
});
$('tr[class*=child-]').hide().children('td');

演示：Fiddle

【讨论】：

但我扩展到叶子。然后单击其第一个父级（vivek），该父级将被折叠。当我再次单击此父级（Vivek）时。我看到以前展开的项目没有折叠到叶子
Parent1 -> Child1 -> {Parent1.1 ->Child1.1{Parent1.1.1 -Child1.1.1}} 我将展开至子 1.1.1 然后当我点击 Parent1 所有其他级别必须处于初始状态
在点击下我想我可能需要使用 '$this.closest().next().toggle' 类似的东西

【解决方案2】：

这解决了所有问题

         var $trs = $('tr.parent')
        .css("cursor", "pointer")
        .attr("title", "Click to expand/collapse")
        .click(function () {
                var $sibs = $(this).siblings('.child-' + this.id).toggle();
                $(this).siblings().not($sibs).not('.parent').hide();
                $($sibs).find('tr[class*=child-]').hide();
        });

    $('tr[class*=child-]').hide().children('td');

【讨论】：