Блог

У меня есть div, в котором есть содержимое.

Содержимое может быть очень длинным, или содержимое может быть действительно маленьким.

Я не хочу, чтобы содержимое растягивало страницу при загрузке страницы, если оно длинное, я хочу, чтобы они нажали на ссылку «еще», и она соскользнет вниз и покажет остальное содержимое.

Например:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate mi egestas ligula feugiat volutpat. Morbi eros felis, aliquam in varius id, sodales quis nunc. Nulla sagittis consectetur arcu, sed auctor odio placerat quis. Praesent vitae lacus neque. Curabitur ultricies tristique sollicitudin. Suspendisse malesuada nunc at augue interdum at facilisis ipsum gravida.

Под ним находится панель или ссылка с надписью «показать остальное».

При нажатии этот div удлиняется и показывает остальное содержимое:

Nunc congue sapien sed sem tincidunt ut adipiscing neque lacinia. Praesent facilisis quam sed tellus sodales id tristique massa ullamcorper. Donec sem turpis, cursus in elementum id, tincidunt a libero. Etiam feugiat, sem quis dictum imperdiet, nisl ante pharetra erat, ut ornare nulla justo ac sapien.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate mi egestas ligula feugiat volutpat. Morbi eros felis, aliquam in varius id, sodales quis nunc. Nulla sagittis consectetur arcu, sed auctor odio placerat quis. Praesent vitae lacus neque. Curabitur ultricies tristique sollicitudin. Suspendisse malesuada nunc at augue interdum at facilisis ipsum gravida. Nunc congue sapien sed sem tincidunt ut adipiscing neque lacinia. Praesent facilisis quam sed tellus sodales id tristique massa ullamcorper. Donec sem turpis, cursus in elementum id, tincidunt a libero. Etiam feugiat, sem quis dictum imperdiet, nisl ante pharetra erat, ut ornare nulla justo ac sapien.

Я знаю, будет трудно контролировать, что будет отключено, бла-бла-бла, но это не для такого рода вещей. Div не содержит текста, он содержит список функций, например, в списке X может быть 4 функции, в списке Z может быть 14 функций, вместо растягивания страницы, если в списке 14 функций, перечисленных вертикально, мы хотим, чтобы в нем отображались только некоторые, а затем они должны нажать «показать мне больше», чтобы он скользнул вниз и показал остальные.

Как бы я это сделал? Даже jsfiddle, чтобы продемонстрировать это?

Спасибо 🙂

Попробуйте присвоить div фиксированную высоту. Для этого вы можете использовать CSS. Затем сравните высоту списка с внешним div. Если оно больше, покажите панель со ссылкой, показывающей больше. Нажав на эту панель, вы можете управлять высотой внешнего div. Вот так —

CSS

    .parentDiv{
              height:some fixed height px;
              overflow: auto;
              }
  

Jquery

           var parentHeight = $('.parentDiv').height();
          var listHeight = $('#List').outerHeight(true);
          if(parentHeight < listHeight) {
                   $('#linkBar').show();
                }
          $('#linkBar').click(function(){
            //$('.parentDiv').height(listHeight);
            //OR you can use following code to animate the div
            $('.parentDiv').animate({'height': listHeight}, 'slow')
            });
  

Вот рабочая демонстрация моей реализации (по совпадению, аналогичная приведенному выше ответу; я делал это до того, как были даны какие-либо ответы): http://jsfiddle.net/7fhrN/15

Это работает для пользователей без JavaScript и обеспечивает плавное ухудшение качества вашей страницы. Попробуйте переключить библиотеку JS на что-нибудь случайное в JsFiddle и нажмите Выполнить.

HTML:

 <div class="stretchy">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate mi egestas ligula feugiat volutpat. Morbi eros felis, aliquam in varius id, sodales quis nunc. Nulla sagittis consectetur arcu, sed auctor odio placerat quis. Praesent vitae lacus neque. Curabitur ultricies tristique sollicitudin. Suspendisse malesuada nunc at augue interdum at facilisis ipsum gravida.</div>
<div class="stretchy">Nunc congue sapien sed sem tincidunt ut adipiscing neque lacinia. Praesent facilisis quam sed tellus sodales id tristique massa ullamcorper. Donec sem turpis, cursus in elementum id, tincidunt a libero. Etiam feugiat, sem quis dictum imperdiet, nisl ante pharetra erat, ut ornare nulla justo ac sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate mi egestas ligula feugiat volutpat. Morbi eros felis, aliquam in varius id, sodales quis nunc. Nulla sagittis consectetur arcu, sed auctor odio placerat quis. Praesent vitae lacus neque. Curabitur ultricies tristique sollicitudin. Suspendisse malesuada nunc at augue interdum at facilisis ipsum gravida. Nunc congue sapien sed sem tincidunt ut adipiscing neque lacinia. Praesent facilisis quam sed tellus sodales id tristique massa ullamcorper. Donec sem turpis, cursus in elementum id, tincidunt a libero. Etiam feugiat, sem quis dictum imperdiet, nisl ante pharetra erat, ut ornare nulla justo ac sapien.</div>
  

CSS — файл:

 .stretchy
{
    margin: 20px;
    padding: 5px;
    background-color: rgb(240, 240, 240);
    overflow: hidden;

    position: relative;

    padding-bottom: 20px;
}

.inner
{
    max-height: 120px;
    overflow: hidden;
}

.reveal
{
    position: absolute;
    bottom: 0px;
}
  

JavaScript:

 $(document).ready(function()
{
  $('.stretchy').each(function()
  {
    if ($(this).height() > 130)
    {
      $(this).replaceWith('<div class="stretchy"><div class="inner">'   $(this).html()   '</div><a href="#" class="reveal">Show me more lipsum</a></div>');
    }
  });

  $('.reveal').toggle(function()
  {
    $(this).parent().find('.inner').animate({maxHeight: '1000px'});
  }, function() {
    $(this).parent().find('.inner').animate({maxHeight: '120px'});
  });
});
  

По сути, я перебираю все <div> файлы с помощью класса stretchy . Если они слишком большие, я заменяю их на <div> с контейнером и ссылкой внизу, которая изменяет max-height значение inner <div> на какое-то нелепое значение.

Просто попробуйте. Увидеть > заставить меня объяснить это тебе.