[英]Jquery chevron icon not toggling down with accordion row when collapsed
First, My jfiddle: http://jsfiddle.net/34y943qq/ 首先,我的jfiddle: http : //jsfiddle.net/34y943qq/
I have a bootstrap table with accordion properties that expands child rows when clicked. 我有一个带有手风琴属性的引导表,单击该表会展开子行。 When I click another row, it expands, as well as collapses the previously opened row. 当我单击另一行时,它会展开以及折叠之前打开的行。 This works, however the chevron icons I am using to indicate drop-down status don't seem to flip back. 这行得通,但是我用来指示下拉状态的人字形图标似乎没有向后翻转。
I made a change http://jsfiddle.net/34y943qq/1/ , but this also seems to not cause previous toggled chevrons to collapse. 我进行了更改http://jsfiddle.net/34y943qq/1/ ,但这似乎也不会导致以前切换的人字形字体崩溃。 The only way I can get a chevron to toggle back is clicking directly on a row to open/close it. 我可以使人字形切换回的唯一方法是直接单击行以打开/关闭它。
Here's the jscript I added: 这是我添加的jscript:
$(this).find('span').closest('.chevron_toggleable')
.not(this)
.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
I've also tried moving the ".not(this)" up to the find('span') but this doesn't seem to work either. 我也尝试将“ .not(this)”移至find('span'),但这似乎也不起作用。
What am I missing? 我想念什么?
here's the code to generate the table: 这是生成表的代码:
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>';
Actually, I see where it's called twice: 实际上,我看到它被两次调用的地方:
// 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>';
}
The reason they are both called "expand child collapse, is due to a SO question I found a while back on how to make expanding rows...I'm trying to find the link now, but I believe the gist was that each sub row needed the same collapse name so when the parent row was clicked, it would collapse all children rows. 它们之所以被称为“展开子项折叠”的原因是由于我发现了一个关于如何进行扩展行的问题……我现在正在尝试查找链接,但是我相信要点是每个子项该行需要相同的折叠名称,因此当单击父行时,它将折叠所有子行。
Edit: here we go Creating Accordion Table with Bootstrap 编辑:这里我们去用Bootstrap创建手风琴表
That example has 1 sub row for each expanding row, I added a second row to be expanded with the same name, based on code found here: http://www.bootply.com/122871 该示例的每个扩展行有1个子行,我根据此处找到的代码添加了第二行以相同的名称进行扩展: http : //www.bootply.com/122871
DEMO: http://jsfiddle.net/rn07jq35/2/ Check the first three lines compare to the performance of the rest 演示: http : //jsfiddle.net/rn07jq35/2/检查前三行与其余部分的性能比较
Was at work and didnt ave time to try things. 在上班,没有时间去尝试。
I have edit the answer to this 我已经编辑了答案
$(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');
});
The thing about child is this 关于孩子的事情是这个
<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>
So you essentially have one child. 所以你基本上有一个孩子。 Then you put your collapse within your <div>
tag rather than your <tr>
tag. 然后,将折叠收起在<div>
标签而不是<tr>
标签中。
Hope this helps. 希望这可以帮助。
I'd put the swapping chevron part in the click
function like this: 我将交换人字形部分放在如下的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');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.