【发布时间】：2016-09-02 11:41:06
【问题描述】：
我已经编写了 Jquery 代码，通过单击加号和减号图标来展开和折叠表格行。现在的问题是：如果我展开第一行，将显示相应的详细信息。现在，如果我展开第二行，第二行将展开，我需要折叠先前展开的第一行。我应该如何实现这一点？ 下面是我的代码：
$(function() {
$('.show-details').click(
function() {
if (!$(this).hasClass('panel-collapsed')) {
$(this).parent('tr').next().fadeIn(700);
$(this).addClass('panel-collapsed');
$(this).find('i').removeClass('glyphicon-plus').addClass('glyphicon-minus');
} else {
$(this).parent('tr').next().fadeOut(700);
$(this).removeClass('panel-collapsed');
$(this).find('i').removeClass('glyphicon-minus').addClass('glyphicon-plus');
}
}
);
});.hideRow {
display: none
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid main-content registration">
<div class="row">
<div class="col-lg-12">
<div class="provider-table member-portal-claim col-sm-offset-1">
<div class="table-responsive">
<table class="table denial-table claim-table">
<thead>
<tr class="background-blue">
<th>Provider Name</th>
<th>Claim Number</th>
<th>Service From Date</th>
<th>Service To Date</th>
<th>Billed Amount</th>
<th>Paid Amount</th>
<th>Transaction Date</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>CONSOLIDATED MED PRACTICES</td>
<td>1234569870</td>
<td>06/25/2015</td>
<td>08/19/2014</td>
<td>$100</td>
<td>$50.00</td>
<td>08/19/2014</td>
<td>Paid</td>
<td class="show-details"><i class="glyphicon glyphicon-plus">show-details</i>
</td>
</tr>
<tr class="hideRow">
<td colspan="9">
<label>Details</label>
<div class="table-responsive">
<table class="table denial-table claim-table member-portal-table" rules="all">
<!--Start of the nested table-->
<thead>
<tr class="background-blue">
<th>Performing Provider</th>
<th>Claim Number</th>
<th>Service From Date</th>
<th>Service To Date</th>
<th>Billed Amount</th>
<th>Paid/To be Paid Amount</th>
<th>Procedure Code /w modifier xxxxx-m1-m2</th>
<th>Benefit Code</th>
<th>EOB Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>CONSOLIDATE</td>
<td>1234569870</td>
<td>02/17/2016</td>
<td>02/17/2016</td>
<td>$120.53</td>
<td>$50</td>
<td>11111</td>
<td>9999</td>
<td>2222</td>
</tr>
<tr>
<td>CONSOLIDATE</td>
<td>1234569870</td>
<td>02/17/2016</td>
<td>02/17/2016</td>
<td>$120.53</td>
<td>$50</td>
<td>11111</td>
<td>9999</td>
<td>2222</td>
</tr>
<tr>
<td>CONSOLIDATE</td>
<td>1234569870</td>
<td>02/17/2016</td>
<td>02/17/2016</td>
<td>$120.53</td>
<td>$50</td>
<td>11111</td>
<td>9999</td>
<td>2222</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>SEMMES-MURPHEY CLINIC</td>
<td>1234569870</td>
<td>06/25/2015</td>
<td>08/19/2014</td>
<td>$100</td>
<td>$50.00</td>
<td>08/19/2014</td>
<td>Denied</td>
<td class="show-details"><i class="glyphicon glyphicon-plus"></i>
</td>
</tr>
<tr class="hideRow">
<td colspan="9">
<label>Details</label>
<div class="table-responsive">
<table class="table denial-table claim-table member-portal-table" rules="all">
<!--Start of the nested table-->
<thead>
<tr class="background-blue">
<th>Performing Provider</th>
<th>Claim Number</th>
<th>Service From Date</th>
<th>Service To Date</th>
<th>Billed Amount</th>
<th>Paid/To be Paid Amount</th>
<th>Procedure Code /w modifier xxxxx-m1-m2</th>
<th>Benefit Code</th>
<th>EOB Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>SEMMES-MURPHEY CLINIC</td>
<td>1234569870</td>
<td>02/17/2016</td>
<td>02/17/2016</td>
<td>$120.53</td>
<td>$50</td>
<td>11111</td>
<td>9999</td>
<td>2222</td>
</tr>
<tr>
<td>SEMMES-MURPHEY CLINIC</td>
<td>1234569870</td>
<td>02/17/2016</td>
<td>02/17/2016</td>
<td>$120.53</td>
<td>$50</td>
<td>11111</td>
<td>9999</td>
<td>2222</td>
</tr>
<tr>
<td>SEMMES-MURPHEY CLINIC</td>
<td>1234569870</td>
<td>02/17/2016</td>
<td>02/17/2016</td>
<td>$120.53</td>
<td>$50</td>
<td>11111</td>
<td>9999</td>
<td>2222</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>【问题讨论】：
-
jsFiddle 解决上述问题jsfiddle.net/gbhopale/vxrgokvu