JQuery скользить вниз от первого комментария до полной страницы - PullRequest
Новая
       16

JQuery скользить вниз от первого комментария до полной страницы

0 голосов
/ 05 февраля 2010

У меня есть список из 10 комментариев на странице. Их высота неизвестна, поскольку зависит от содержания комментариев.

Как лучше всего показывать только первый комментарий, пока вы не нажмете кнопку, и в этот момент она смещается вниз, чтобы показать все 10 комментариев на странице? Таким образом, по умолчанию пользователь будет видеть только один комментарий, пока он не нажмет кнопку «Просмотреть дополнительные комментарии», после чего он опустится вниз, чтобы отобразить их все.

Спасибо!

Ответы [ 2 ]

2 голосов
/ 05 февраля 2010

JQuery: 

$(function(){
  $(".comments").not(":first").hide();
  $("#btnViewAll").click(function(){
    $(".comments").slideDown();
  });
});

HTML: 

<input type="button" id="btnViewAll" value="Show All Comments" />
<div class="comments">1 comment</div>
<div class="comments">2 comment</div>
<div class="comments">3 comment</div>
<div class="comments">4 comment</div>
<div class="comments">5 comment</div>
0 голосов
/ 05 февраля 2010

Если у вас есть кнопка с классом viewMoreButton и div с классом moreComments, содержащим оставшиеся комментарии - тогда вы можете использовать этот скрипт: 

$("div.moreComments").hide();
$(".viewMoreButton").click(function(){
    $("div.moreComments").slideDown("fast");
    $(this).remove();
}

Также удаляет саму кнопку, но если вы хотите, чтобы кнопка переключала комментарии, сделайте следующее: 

$("div.moreComments").hide();
$(".viewMoreButton").click(function(){
    $("div.moreComments").slideToggle("fast");
}
...