可折叠表更改单击时的雪佛龙图标

时间:2014-06-25 08:07:52

标签: javascript css twitter-bootstrap

我正在处理一个包含每行隐藏详细信息的表。表行由Bootstrap手风琴制成。 手风琴行和隐藏的细节工作正常但是在切换[折叠/展开]时更改V形图标的JS无法正常工作。它应该只更改单击行上的V形图标,但目前它会更改所有行的V形图标。

我已经阅读了一些关于我的问题的相关帖子并且已经尝试了所有这些但我无法让它工作。我缺少什么?

Bootply Demo here

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>&nbsp;&nbsp;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&nbsp;&nbsp;<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>&nbsp;&nbsp;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&nbsp;&nbsp;<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>&nbsp;&nbsp;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&nbsp;&nbsp;<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>&nbsp;&nbsp;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&nbsp;&nbsp;<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>&nbsp;&nbsp;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>&nbsp;&nbsp;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");
});

2 个答案:

答案 0 :(得分:2)

将您的.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");
  });

答案 1 :(得分:2)

这应该有效:

$(".accordion-toggle").on("click", function () {
  if($(this).find(".fa").hasClass("fa-plus-square")) {
    $(this).find(".fa").removeClass("fa-plus-square").addClass("fa-minus-square");
  } else {
    $(this).find(".fa").removeClass("fa-minus-square").addClass("fa-plus-square");
  }
});