親行のクリックで隠し行を表示

Question

親行リンク.btn-linkをクリックすると、1行が隠れて表示されます。

[ details ' - 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

最も近いあなたはそれがないと思う何をしていません。 TRを探してDOMを上ります。そして、あなたは

$(".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>