Jquery切换列表读取更多/更少按钮

Question

我现在使用这个效果很好的脚本，但我还想要一个少读取按钮。 这我无法弄清楚如何做到这一点。希望有人可以帮助我。

$('#info')
      .find('tr:gt(5)')
      .hide()
      .end()
      .append(
            $('<tr><td class="show_more_btn">Read more &raquo;</tr></td>').click( function(){
              $(this).siblings(':hidden').show().end().remove();
    })
);

Answer 1

将您当前的javascript替换为：

$('#info').find('tr:gt(5)').addClass('toggletr').hide()
.end().append(
  $('<tr><td class="show_more_btn">Read more »</td></tr>').click(function(){
      $(this).siblings('.toggletr').toggle();
      if($(this).hasClass('expanded')){
          $(this).text('Read more »');
          $(this).removeClass('expanded');
      } else{
          $(this).text('Read less «');
          $(this).addClass('expanded');
      }
 })
);

将.toggle()替换为.slideToggle()或.fadeToggle()可以让您感觉更顺畅。