我已经编写了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>最佳答案
您可以使用.not()从$('.show-details')对象中排除当前元素，使像这样的元素折叠
//Identify element apart from the clicked element.
var elem = $('.show-details').not(this);
//fade out elements
elem.parent('tr').next().fadeOut(700);
//Adjust classes
elem.removeClass('panel-collapsed');
elem.find('i').removeClass('glyphicon-minus').addClass('glyphicon-plus')
$(function() {
$('.show-details').click(function() {
//Collapse other elements
var elem = $('.show-details').not(this).removeClass('panel-collapsed');
elem.parent('tr').next().fadeOut(700);
elem.find('i').removeClass('glyphicon-minus').addClass('glyphicon-plus')
//toggle current elemet
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"></i>Show
</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>
Show
</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>关于jquery - 在jQuery中展开和折叠表行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39291540/