當點擊時使用jquery展開/摺疊表的2/3

Question

我想在頁腳上單擊時展開和摺疊表格行的2/3。

<table class="planTable"> 
    <tbody> 

     <tr> 
      <th>Plan</th> 
     </tr> 

     <tr class="cartItemGroup"> 
      <td > 
      10 
      GB 
      </td> 
     </tr> 

     <tr class="cartItemGroup"> 
      <td > 
      300 
      MB 
      </td> 
     </tr> 

     <tr class="cartItemGroup"> 
      <td > 
      1 
      GB 
      </td> 
     </tr> 

     <tr class="cartItemGroup"> 

      <td > 
      3 
      GB 
      </td> 
     </tr> 

     <tr class="cartItemGroup"> 
      <td > 
      6 
      GB 
      </td> 
     </tr> 

     <tr class="cartItemGroup"> 
      <td > 
      15 
      GB 
      </td> 
     </tr> 

     <tr class="cartItemGroup"> 
      <td > 
      20 
      GB 
      </td> 
     </tr> 

     <tr class="cartItemGroup"> 
      <td > 
      30 
      GB 
      </td> 
     </tr> 

     <tr class="cartItemGroup"> 
      <td > 
      40 
      GB 
      </td> 
     </tr> 

     <tr class="cartItemGroup"> 
      <td > 
      50 
      GB 
      </td> 
     </tr> 

    </tbody> 
    <tfoot> 
     <tr> 
      <td> 
       <a class="toggle planSection dBlock more-less collapseImg" href="javascript:void(0)"> 
        <div> 
         <font class="mrcLabel">Show top 3</font> 
        </div> 
       </a> 
      </td> 
     </tr> 
    </tfoot> 
</table> 

頁腳含有與錨標記觸發事件的文本

應該是默認使用「顯示所有的計劃」被摺疊文本 & 當擴展的文本，應自動切換到「顯示前3" 名 和文本應保持在底部

jsfiddle

Answer 1

充分披露該溶膠ution使用jQuery，但是由於您使用jQuery進行了標記，因此我認爲它可以。

我稍微更改了標記以符合您的默認情況，以避免內容在JavaScript加載時閃爍。

$(function() { 
    var expandText = 'Show all plans', 
     closeText = 'Show top 3', 
     isOpen = false, 
     rowsToShowWhenCollapsed = 3, 
     $rows = $('.cartItemGroup'), 
     $triggerLink = $('.toggle'); 

    $triggerLink.on('click', function (e) { 
     e.preventDefault(); 

     if (isOpen) { 
      closeRows(); 
      isOpen = false; 
     } else { 
      openRows(); 
      isOpen = true; 
     } 
    }); 

    function closeRows() { 
     var rowArray = $rows.toArray(); 

     $rows.hide(); 

     for (var i = 0; i < rowsToShowWhenCollapsed; i++) { 
      $(rowArray[i]).show(); 
     } 

     $triggerLink.find('span').text(expandText); 
    } 

    function openRows() { 
     $rows.show(); 
     $triggerLink.find('span').text(closeText); 
    } 

    closeRows(); 
}); 

看看這個JSFiddle看到它的代碼在行動。