javascript - 单击行时更改引导行中的字形

Question

在这里扩展答案: Bootstrap 3 collapse change chevron icon on click

我试图在表格行展开时将字形更改为向上，但它不起作用，而且我对 js 的了解非常有限。我尝试过接受 trante 的回答

$('.chevron_toggleable').on('click', function() {
  $(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});

 <span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span>

修改如下:

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

其中 Accordion-toggle 是可以折叠的行的类名称。虽然该行按应有的方式折叠，但图标没有改变。我尝试将“td”更改为“table”、“tr”等，但似乎不起作用

更新:对于 APAD:

我使用 php 生成整个表，但这里是相关代码:

   if (mysqli_num_rows($result)) {
                        echo '<table id="dasTable" cellpadding="0"      cellspacing="0" class="table table-responsive 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="bg-info accordion-toggle" data-toggle="collapse" id="', $sidvalue, '" data-target=".', $sidvalue, '">';
                    echo '<td><span class="glyphicon glyphicon-plus"></span> ', $sidvalue, '</td>';
                    echo '<td>', $assigned, '</td>';
                    echo '<td>', $station, '</td>';
                    echo '<td>', $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>';
                    echo '<td class="h4" colspan="4"><span class="glyphicon glyphicon-hdd"></span> ', $used, ' Bytes</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) {
                            echo '<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:100%">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, '%">', $jobsdone, '/', $totaljobs, ' (', $percentdone, '%)</div>';
                    }
                    echo '</div>';
                    echo '</td>';
                    echo '</tr>';
            }
            echo '</tbody>';
            echo '</table><br />';
    }

这会生成一个如下所示的表:

当用户单击该行上的任意位置时，它会展开以显示以下内容:

Answer 1

这将为您完成这项工作:

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

考虑这个html:

<div class="a"> 
<span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span>
</div>
<div class="a"> 
<span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span>
</div>
<div class="a"> 
<span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span>
</div>
<div class="a"> 
<span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span>
</div>

JSFIDDLE