我有一个带有一些折叠行的表。我想更改行上的展开-折叠图标展开-折叠我成功了1行。但当我尝试对多行执行此操作时,代码运行不好,并与其他行冲突
请帮助我如果有人有解决方案
var flag = true;
$('.togglebutton').click(function() {
if (flag == true) {
this.getElementsByTagName('img')[0].src = "../images/minus.png";
flag = false;
} else {
this.getElementsByTagName('img')[0].src = "../images/plus.png";
flag = true;
}
})
<tr class="clickable apply-max-width">
<td class="table-tr1-td1 togglebutton"><b aria-hidden="true" data-toggle="collapse" data-target="#accordion"><img src="../images/plus.png"/></b></td>
<td>abcd@gmail.com</td>
<td colspan="2">WD100165</td>
<td>2/1/2017</td>
<td>YES</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td colspan="2">
<div id="accordion" class="accordion collapse data-found">
<table class="table table-striped data-table-inner-disabled div-found">
<thead>
<tr>
<th></th>
<th class="">Application</th>
<th class="">App Role</th>
<th>Workflow Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="application-User-inv"><img src="../images/delete_1.png" class="img-responsive" /></td>
<td class="application-User-inv">Portal</td>
<td>User</td>
<td>Pending Approval</td>
</tr>
<tr>
<td class="application-User-inv"><img src="../images/delete_1.png" class="img-responsive" /></td>
<td class="application-User-inv">SSR</td>
<td>User</td>
<td>Provisioned</td>
</tr>
</tbody>
</table>
</div>
</td>
<td></td>
<td>
</td>
<td></td>
</tr>
<tr class="clickable apply-max-width">
<td class="table-tr1-td1 togglebutton"><b aria-hidden="true" data-toggle="collapse" data-target="#accordion2"><img src="../images/plus.png"/></b></td>
<td>abcd@gmail.com</td>
<td colspan="2">WD100165</td>
<td>2/1/2017</td>
<td>YES</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td colspan="2">
<div id="accordion2" class="accordion collapse data-found">
<table class="table table-striped data-table-inner-disabled div-found">
<thead>
<tr>
<th></th>
<th class="">Application</th>
<th class="">App Role</th>
<th>Workflow Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="application-User-inv"><img src="../images/delete_1.png" class="img-responsive" /></td>
<td class="application-User-inv">Portal</td>
<td>User</td>
<td>Pending Approval</td>
</tr>
<tr>
<td class="application-User-inv"><img src="../images/delete_1.png" class="img-responsive" /></td>
<td class="application-User-inv">SSR</td>
<td>User</td>
<td>Provisioned</td>
</tr>
</tbody>
</table>
</div>
</td>
<td></td>
<td>
</td>
<td></td>
</tr>
1条答案
按热度按时间3yhwsihp1#
您需要存储每个折叠面板的标志状态。
http://codeply.com/go/e49vQb4wE4