Question

我编写了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>

Answer 1

您可以使用.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>

Answer 2

现在，如果我扩展第二行，第二行将展开，我需要折叠先前扩展的行，这是第一行。我应该实现这个目标吗？

//
// For the previous collapsed  row, if any:
//
var collapsed = $('.show-details.panel-collapsed').not(this);
collapsed.parent('tr').next().fadeOut(700);
collapsed.removeClass('panel-collapsed');
collapsed.find('i').removeClass('glyphicon-minus').addClass('glyphicon-plus');

摘录：

$(function () {
  $('.show-details').on('click', function (e) {
    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');
    }

    //
    // For the previous collapsed  row, if any:
    //
    var collapsed = $('.show-details.panel-collapsed').not(this);
    collapsed.parent('tr').next().fadeOut(700);
    collapsed.removeClass('panel-collapsed');
    collapsed.find('i').removeClass('glyphicon-minus').addClass('glyphicon-plus');
  });
});

.hideRow {
  display: none
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.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></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>

Answer 3

在点击功能

中添加以下行

$(".hideRow").fadeOut(700);

如下所示

$('.show-details').click(

            function() {
      $(".hideRow").fadeOut(700);
      $(this).removeClass('panel-collapsed');

更新小提琴供您参考 https://jsfiddle.net/vxrgokvu/2/

在Jquery中展开和折叠表行

3 个答案: