折叠时，jQuery人字形图标不随手风琴行向下切换

Question

首先，我的jfiddle： http : //jsfiddle.net/34y943qq/

我有一个带有手风琴属性的引导表，单击该表会展开子行。 当我单击另一行时，它会展开以及折叠之前打开的行。 这行得通，但是我用来指示下拉状态的人字形图标似乎没有向后翻转。

我进行了更改http://jsfiddle.net/34y943qq/1/ ，但这似乎也不会导致以前切换的人字形字体崩溃。 我可以使人字形切换回的唯一方法是直接单击行以打开/关闭它。

这是我添加的jscript：

$(this).find('span').closest('.chevron_toggleable')
    .not(this)
    .toggleClass('glyphicon-chevron-up glyphicon-chevron-down');

我也尝试将“ .not（this）”移至find（'span'），但这似乎也不起作用。

我想念什么？

这是生成表的代码：

 if (mysqli_num_rows($result)) {
    echo '<table id="dasTable" cellpadding="0" cellspacing="0" class="table table-hover table-bordered tablesorter">';
    echo '<thead>';
    echo '<tr><th>Service ID</th><th>Assigned Namespace</th><th>DAS Station</th><th>Ingest Completed</th><th>Currently Ingesting</th><th>Offsite going to DAS</th><th>Mounted</th></tr></thead>';
    echo '<tbody>';

    // Generate rows from current das information
    while ($row2 = mysqli_fetch_row($result)) {

        // Format cell background based on content
        $sidvalue       = $row2[0];
        $station        = $row2[1];
        $used           = $row2[2];
        $attacheddate   = $row2[3];
        $starteddate    = $row2[4];
        $ingestcomplete = $row2[5];
        $ingesting      = $row2[6];
        $updating       = $row2[7];
        $mounted        = $row2[8];
        $totaljobs      = $row2[9];
        $remainingjobs  = $row2[10];
        $assigned       = $row2[11];
        echo '<tr class="accordion-toggle" data-toggle="collapse" id="', $sidvalue, '" data-target=".', $sidvalue, '">';
        echo '<td class="rowtd"><span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span> ', $sidvalue, '</td>';
        echo '<td class="rowtd">', $assigned, '</td>';
        echo '<td class="rowtd">', $station, '</td>';
        echo '<td class="rowtd">', $ingestcomplete, '</td>';
        if ($ingesting == 'GREEN') {
            echo '<td class="success">YES</td>';
        } else {
            if ($ingestcomplete != 'NO') {
                echo '<td class="success">NO</td>';
            } else {
                echo '<td class="danger">NO</td>';
            }
        }

        if ($updating == 'GREEN') {
            echo '<td class="success">NO</td>';
        } else {
            echo '<td class="danger">YES</td>';
        }

        if ($mounted == 'GREEN') {
            echo '<td class="success">YES</td>';
        } else {
            if ($ingestcomplete != 'NO') {
                echo '<td class="success">NO</td>';
            } else {

                echo '<td class="danger">NO</td>';
            }
        }
     echo '</tr>';

实际上，我看到它被两次调用的地方：

 // create the sub row
            echo '<tr class="expand-child collapse ', $sidvalue, '">';
            echo '<td class="h4" colspan="3"><b>Attached Date:</b> ', $attacheddate, '</td>';
            $usedgb = round($used / 1024 / 1024 / 1024);
            echo '<td class="h4" colspan="4"><i class="fa fa-hdd-o fa-lg"></i> ', $used, ' Bytes (', $usedgb, ' GB)</td>';
            echo '</tr>';
            echo '<tr class="expand-child collapse ', $sidvalue, '">';
            echo '<td class="h4" colspan="3"><b>Ingest Start Date:</b> ', $starteddate, '</td>';
            echo '<td class="h4" colspan="4">';
            echo '<div class="progress">';
            if ($remainingjobs == 0) {
                $jobsdone = $totaljobs - 1;
                $percentdone = round($jobsdone / $totaljobs * 100);
                echo '<div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="', $percentdone, '" aria-valuemin="0" aria-valuemax="100" style="width:', $percentdone, '%">Last Job</div>';
            } else {
                $jobsdone = $totaljobs - $remainingjobs;
                $percentdone = round($jobsdone / $totaljobs * 100, 1);
                echo '<div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:', $percentdone, '%"><b>', $jobsdone, '/', $totaljobs, ' (', $percentdone, '%)</b></div>';
            }
            echo '</div>';
            echo '</td>';
            echo '</tr>';
        }

它们之所以被称为“展开子项折叠”的原因是由于我发现了一个关于如何进行扩展行的问题……我现在正在尝试查找链接，但是我相信要点是每个子项该行需要相同的折叠名称，因此当单击父行时，它将折叠所有子行。

编辑：这里我们去用Bootstrap创建手风琴表

该示例的每个扩展行有1个子行，我根据此处找到的代码添加了第二行以相同的名称进行扩展： http : //www.bootply.com/122871

Answer 1

演示： http : //jsfiddle.net/rn07jq35/2/检查前三行与其余部分的性能比较

在上班，没有时间去尝试。

我已经编辑了答案

$(document).ready(function () {
    $(function () {
        $("#dasTable").tablesorter();
    });
});
$('.collapse').on('show.bs.collapse', function (e) {
    $("#dasTable").find('.collapse.in').collapse('hide');

    var targetx = $(this).data('trigger');
    $(targetx).find('span').toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
});
$('.collapse').on('hide.bs.collapse', function (e) {
    var targetx = $(this).prev('.accordion-toggle').find('span');
    var targetx = $(this).data('trigger');
    $(targetx).find('span').toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
});

关于孩子的事情是这个

        <tr class="accordion-toggle" data-toggle="collapse" id="1dc4" data-target=".1dc4">
            <td class="rowtd"> <span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span> 1dc4</td>
            <td class="rowtd">Gen2_SJC9</td>
            <td class="rowtd">adsdas5</td>
            <td class="rowtd">NO</td>
            <td class="success">YES</td>
            <td class="success">NO</td>
            <td class="success">YES</td>
        </tr>
        <tr class="expand-child">
            <td colspan="7">
                <div class="container collapse 1dc4" data-trigger="#1dc4">
                    <div class="left"><b>Attached Date:</b>2015-08-26 16:42:04</div>
                    <div class="right"><i class="fa fa-hdd-o fa-lg"></i> 2883577569280 Bytes (2686 GB)</div>
                    <div class="left"><b>Ingest Start Date:</b> 2015-08-31 19:10:14</div>
                    <div class="right">
                        <div class="progress">
                            <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:86.7%"><b>13/15 (86.7%)</b>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>

所以你基本上有一个孩子。 然后，将折叠收起在<div>标签而不是<tr>标签中。

希望这可以帮助。

Answer 2

我将交换人字形部分放在如下的click函数中：

$('.accordion-toggle').on('click', function() {
    $('.chevron_toggleable').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
    $(this).find('span').closest('.chevron_toggleable').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});

JSFiddle