在父行单击时显示隐藏行

Question

我有行，但一行一行是隐藏的，当我单击父行链接时需要显示它们 .btn-link ...

所以当我点击“详细信息” - class="btn-link" 时，我需要显示具有“showDetails”类的下一行以及隐藏的人

点击时没有任何反应。为什么我的代码不起作用？

$(".btn-link").click(function() {
  $(this).closest('tr.showDetails').show();
});

.showDetails {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <a href="#" class="btn-link"> <i class="fa fa-plus-circle" aria-hidden="true"></i> Details
      </a>
    </td>
    <td> </td>
    <td><span class="text-muted"><i class="fa fa-clock-o"></i> 2017-01-04</span></td>
    <td>£46.00</td>
    <td class="text-center">
      <div class="label label-table label-success">Paid</div>
    </td>
  </tr>
  <tr class="showDetails">
    <td colspan="20">
      <table id="" class="table-responsive" cellspacing="0" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Price</th>
            <th>Recipient</th>
            <th>Expiry</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="col-lg-6">
              <p class="detailCell">Three Course Italian Meal for Two with Prosecco at Michelin Recommended Mele e Pere, Soho</p>
            </td>
            <td>46.00</td>
            <td>No recipient</td>
            <td>Mar 11, 2017</td>
            <td><span class="label label-warning">Paid</span></td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>


 

Answer 1

最接近的是没有做你认为它做的事情。 它向上 DOM 寻找 TR。然后你需要下一个 tr

$(".btn-link").click(function() {
  $(this).closest('tr').next().toggle();
});

.showDetails {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <a href="#" class="btn-link"> <i class="fa fa-plus-circle" aria-hidden="true"></i> Details
      </a>
    </td>
    <td> </td>
    <td><span class="text-muted"><i class="fa fa-clock-o"></i> 2017-01-04</span></td>
    <td>£46.00</td>
    <td class="text-center">
      <div class="label label-table label-success">Paid</div>
    </td>
  </tr>
  <tr class="showDetails">
    <td colspan="20">
      <table id="" class="table-responsive" cellspacing="0" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Price</th>
            <th>Recipient</th>
            <th>Expiry</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="col-lg-6">
              <p class="detailCell">Three Course Italian Meal for Two with Prosecco at Michelin Recommended Mele e Pere, Soho</p>
            </td>
            <td>46.00</td>
            <td>No recipient</td>
            <td>Mar 11, 2017</td>
            <td><span class="label label-warning">Paid</span></td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>