Question

我有一个表，其中的行虽然看起来像是嵌套的，但却没有嵌套。我根本无法对此布局进行更改，这是我必须要处理的。

带有+的行折叠它们下面的行和＆＃34;嵌套＆＃34;行折叠了它们下面的行等。我的解决方案在某种程度上有效。我遇到的问题是倒数第二个＆＃34;嵌套＆＃34;行在其下方折叠，包括它不应该的行。我知道为什么，我无法弄清楚如何解决它。

最好的方式来看看我所说的是通过玩小提琴。你会明白我的意思。

修改的

我必须能够重用这个功能，所以我必须保持它的通用性。这就是为什么我没有使用特定的类等。

HTML

<table>
        <tr class="parent-row has-children">
            <td><span class="toggle">+</span><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>

        <tr class="child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr class="child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr class="child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>

        <tr class="parent-row has-children">
            <td><span class="toggle">+</span><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>

        <tr class="child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr class="child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr class="child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>

        <tr class="parent-row has-children">
            <td><span class="toggle">+</span><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>

        <tr class="child-row has-children">
            <td><span class="toggle">+</span><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr class="child-child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr class="child-child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr class="child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr class="child-row has-children">
            <td><span class="toggle">+</span><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr class="child-child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr class="child-child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>

        <tr class="parent-row has-children">
            <td><span class="toggle">+</span><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>

        <tr class="child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr class="child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr class="child-row">
            <td><a href="javascript:;">Heading</a></td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
        </tr>
    </table>

JS

(function() {

var toggle = $('span.toggle');

toggle.on('click', function() {

    var $this = $(this);
    var objectClass = $this.parent().parent().attr('class');

    toggleRow($this, objectClass);

});

function toggleRow(element, elClass) {

    var classes = elClass.split(' ');
    var textList = '';
    for (var i = 0; i < classes.length; i++)
    {
        if (classes[i].length > 0)
        {
            textList += "."+classes[i];
        }
    }
    var $this = element.parents(textList);

    if(!$this.hasClass('collapsed')) {

        $this.addClass('collapsed').nextUntil('tr' + textList).hide();

    } else {

        $this.removeClass('collapsed').nextUntil('tr' + textList).show();

    }
}

}());

Answer 1

$('.parent-row').click(function(){
    var $element = $(this).next();
    while(!$element.hasClass('parent-row')){
        $element.toggle();
        if($element.next().length >0){
            $element = $element.next();   
        }
        else{
            return;
        }
    }
});

$('.child-row.has-children').click(function(){
    var $element = $(this).next();
    while($element.hasClass('child-child-row')){
        $element.toggle();
        if($element.next().length >0){
            $element = $element.next();   
        }
        else{
            return;
        }
    }
});

https://jsfiddle.net/pc1sp8L6/2/

或者更通用的解决方案可能看起来像这样

$('tr[class]').click(function(){
    var thisclass = $(this).attr("class");
    var $element = $(this).next();
    while(!$element.hasClass(thisclass)){
        $element.toggle();
        if($element.next().length >0){
            $element = $element.next();   
        }
        else{
            return;
        }
    }
});

https://jsfiddle.net/pc1sp8L6/3/

Answer 2

我不认为这是最好/最干净的方式，但它可以满足我的需要。

function toggleRow(element, elClass) {

    var classes = elClass.split(' ');
    var textList = '';
    for (var i = 0; i < classes.length; i++)
    {
        if (classes[i].length > 0)
        {
            textList += "."+classes[i];
        }
    }

    var $this = element.parents(textList);
    var lastRow = $this.index() == $('tr' + textList).last().index() ? true : false;

    if($this.attr('data-collapse') !== 'collapsed') {

        if(!lastRow) {
            $this.attr('data-collapse', 'collapsed').nextUntil('tr' + textList).hide();
        } else {
            $this.attr('data-collapse', 'collapsed').nextUntil('tr.has-children').hide();
        }

    } else {

        if(!lastRow) {
            $this.attr('data-collapse', '').nextUntil('tr' + textList).show();
        } else {
            $this.attr('data-collapse', '').nextUntil('tr.has-children').show();
        }

    }
}

http://jsfiddle.net/4nvcn00a/

折叠和展开未嵌套的表行

2 个答案: