表淡出淡出不起作用

Question

下面的代码无法正常工作，因为我需要淡出其他具有类付费扩展的tr，只有淡入我点击。

<table class="views-table cols-6 table table-hover table-striped">
     <thead>
  <tr>
              <th class="views-field views-field-nothing">
        Item          </th>
              <th class="views-field views-field-created">
        Payment date          </th>
              <th class="views-field views-field-commerce-order-total">
        Amount          </th>
              <th class="views-field views-field-status">
        Status          </th>
              <th class="views-field views-field-nothing-1">
                  </th>
              <th class="views-field views-field-nothing-2">
                  </th>
          </tr>
</thead>
<tbody>
      <tr class="odd views-row-first">
              <td class="views-field views-field-nothing">
        Access Prestashop online course          </td>
              <td class="views-field views-field-created">
        26 Jan 2017          </td>
              <td class="views-field views-field-commerce-order-total">
        $2.00          </td>
              <td class="views-field views-field-status">
        Shopping cart          </td>
              <td class="views-field views-field-nothing-1">
        <a href="#" class="detailPay">Details</a>          </td>
              <td class="views-field views-field-nothing-2">
        </td></tr><tr class="pay-expand" style="display: none;">
              <td colspan="6">
                 <span class="pay-mode">Payment Method: Offline Payment</span>
                 <span class="pay-mode">Attachment: payment receipt.pdf</span>
              </td>
           </tr>          

      <tr class="even">
              <td class="views-field views-field-nothing">
        Access Test Course           </td>
              <td class="views-field views-field-created">
        28 Mar 2017          </td>
              <td class="views-field views-field-commerce-order-total">
        300.00  QAR          </td>
              <td class="views-field views-field-status">
        Shopping cart          </td>
              <td class="views-field views-field-nothing-1">
        <a href="#" class="detailPay">Details</a>          </td>
              <td class="views-field views-field-nothing-2">
        </td></tr><tr class="pay-expand" style="display: none;">
              <td colspan="6">
                 <span class="pay-mode">Payment Method: Offline Payment</span>
                 <span class="pay-mode">Attachment: payment receipt.pdf</span>
              </td>
           </tr>          

      <tr class="odd views-row-last">
              <td class="views-field views-field-nothing">
        Access Java online Training course          </td>
              <td class="views-field views-field-created">
        07 Apr 2017          </td>
              <td class="views-field views-field-commerce-order-total">
        14,345.00  QAR          </td>
              <td class="views-field views-field-status">
        Pending          </td>
              <td class="views-field views-field-nothing-1">
        <a href="#" class="detailPay">Details</a>          </td>
              <td class="views-field views-field-nothing-2">
        </td></tr><tr class="pay-expand" style="display: table-row;">
              <td colspan="6">
                 <span class="pay-mode">Payment Method: Offline Payment</span>
                 <span class="pay-mode">Attachment: payment receipt.pdf</span>
              </td>
           </tr>          

  </tbody>

 $(".pay-expand").hide();
$(".detailPay").click(function(){
 alert("");
 $('tr.pay-expand').fadeOut(500);
 $(this).closest('tr').next('tr.pay-expand').fadeToggle(500); 
 });

下面的代码无法正常工作，因为我需要淡出其他具有类付费扩展的tr，只有淡入我点击。

Answer 1

您需要使用$(this)淡出当前元素。

 $(this).next('tr.pay-expand').fadeOut(500);