我正在处理一个包含每行隐藏详细信息的表。表格行是用 Bootstrap Accordion 制作的。 Accordion 行和隐藏的细节工作正常，但在切换 [折叠/展开] 时更改 V 形图标的 JS 无法正常工作。它应该仅更改单击的行上的 V 形图标，但目前它更改所有行的 V 形图标。
我已经阅读了一些有关我的问题的相关帖子，并尝试了所有这些帖子，但我无法让它工作。我缺少什么？
HTML
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1><i class="fa fa-file-text"></i> Maintenance Work Requests <small>List</small></h1>
<ol class="breadcrumb">
<li><a href="@Url.Action("Index", "MaintWORequests", null)"><i class="fa fa-home"></i> Home</a></li>
<li class="active">Listado de Solicitudes</li>
</ol>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-wrench"></i> Maintenance Work Requests</h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table id="solicitudes" class="table table-bordered table-hover table-striped tablesorter" style="vertical-align:middle; border-collapse:collapse">
<thead>
<tr>
<th class="header" style="text-align:center"></th>
<th class="header" style="text-align:center"># <i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Títle <i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Component<i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Created <i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Type<i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Approved By<i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Status <i class="fa fa-sort"></i></th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#1" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3325</td>
<td>Trabajo sobre Sistema Eléctrico</td>
<td>710.100.00.00 - Sistema Eléctrico</td>
<td style="text-align:center">2014/05/24</td>
<td><p class="text-info" style="text-align:center"><b>Solicitud</b></p></td>
<td style="text-align:center"></td>
<td class="info" style="text-align:center"><span class="label label-primary" style="font-size:small">Creada <i class="fa fa-bolt"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="1">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #1
</p>
</div>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#2" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3324</td>
<td>AVERIA: Correa transmisión Motor Aux</td>
<td>620.100.20.00 - Transmisión</td>
<td style="text-align:center">2014/05/01</td>
<td style="text-align:center"><p class="text-danger"><b>Avería</b></p></td>
<td style="text-align:center">Supervisor Mantenimiento</td>
<td class="success" style="text-align:center"><span class="label label-success" style="font-size:small">Aceptada <i class="fa fa-thumbs-o-up"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="2">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #2
</p>
</div>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#3" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3327</td>
<td>Revisión Panel Eléctrico</td>
<td>710.100.60.10 - Panel Nº 1</td>
<td style="text-align:center">2014/04/27</td>
<td style="text-align:center"><p class="text-info"><b>Solicitud</b></p></td>
<td style="text-align:center"></td>
<td class="warning" style="text-align:center"><span class="label label-warning" style="font-size:small">Revisión <i class="fa fa-eye"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="3">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #3
</p>
</div>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#4" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3323</td>
<td>Chequeo cableado catenaria</td>
<td>320.200.60.30 - Catenaria</td>
<td style="text-align:center">2014/04/26</td>
<td style="text-align:center"><p class="text-info"><b>Solicitud</b></p></td>
<td style="text-align:center"></td>
<td class="danger" style="text-align:center"><span class="label label-danger" style="font-size:small">Rechazada <i class="fa fa-thumbs-o-down"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="4">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #4
</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div><!-- /.row -->
<div>
<p><button type="button" onclick="location.href='@Url.Action(" index",="" "maintworequests",="" null)';return="" false;"="" class="btn btn-primary btn-lg" style="font-size: 25px"><i class="fa fa-mail-reply"></i> Volver</button></p>
</div>
</div><!-- /#page-wrapper -->
JS
$('tr').on('shown.bs.collapse', function(){
$(this).parent().find(".fa-plus-square").removeClass("fa-plus-square").addClass("fa-minus-square");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".fa-minus-square").removeClass("fa-minus-square").addClass("fa-plus-square");
});
最佳答案
将 .parent() 更改为 .prev() 或 .prev('tr')
$('tr').on('shown.bs.collapse', function(){
$(this).prev('tr').find(".fa-plus-square").removeClass("fa-plus-square").addClass("fa-minus-square");
}).on('hidden.bs.collapse', function(){
$(this).prev('tr').find(".fa-minus-square").removeClass("fa-minus-square").addClass("fa-plus-square");
});
关于javascript - 单击时可折叠表更改 V 形图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24403356/