单击行时更改 bootstrap 行中的字形

Question

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

我试图在扩展 table 行时将字形更改为向上，但它不起作用，而且我对 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 是 class 可以折叠的行的名称。虽然该行按应有的方式折叠，但图标并没有改变。我试过将 "td" 更改为 "table"、"tr" 等，但它似乎不起作用

更新：APAD：

我正在使用 php 生成整个 table，但这里是相关代码：

   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 />';
    }

这会生成如下所示的 table：

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

Answer 1

问题是您正在使用 .closest，它测试元素本身，然后遍历 up DOM 以找到最接近的元素 - 该函数不会看你的 tr 的 children。请改用 .find。根据您的文档结构，我在下面的内容可能不起作用。但是，如果您可以编写一个找到正确 td 的选择器，只需将其与 .find.

中的当前选择器交换即可

$(this).find("td").find("chevron_toggleable").toggleClass('glyphicon-chevron-down glyphicon-chevron-up');

Answer 2

这将为您完成工作：

$('.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

单击行时更改 bootstrap 行中的字形

change glyphicon in bootstrap row when row is clicked

html

javascript

twitter-bootstrap-3