jQuery .. div显示/滑动？

Question

我有一个div，其中包含内容。

内容可能很长，也可能很小。

如果内容太长，我不希望内容在页面加载时拉伸页面，我希望他们单击​​“更多”链接，它将向下滑动并显示其余内容。

例如：

Lorem ipsum dolor坐下，一直保持着安静的状态。 悬韧带状小舌小叶紫癜。 Morbi eros felis，阿里夸姆（varius id），sodales quis nunc。 Nulla sagittis consectetur arcu，sed auctor dioo placerat quis。 Praesent vitae lacus neque。 Curabitur ultricies tristique sollicitudin。 Suspendisse malesuada nunc在facilisis ipsum gravida的augue interdum。

它下方是一个显示“显示其余内容”的栏或链接

点击后，此div就会加长并显示其余内容：

Nunc congue sapen sed sem tincidunt ut adipiscing neque lacinia。 Praasent facilisis quad sed tellus sodales id tristique massa ullamcorper。 Donec sem turpis，基本元素的诅咒，libcidunt libero。 Etiam feugiat，sem quis dictum imperdiet，nisl ante pharetra erat，ut ornare nulla justo ac sapien。

Lorem ipsum dolor坐下，一直保持着安静的状态。 悬韧带状小舌小叶紫癜。 Morbi eros felis，阿里夸姆（varius id），sodales quis nunc。 Nulla sagittis consectetur arcu，sed auctor dioo placerat quis。 Praesent vitae lacus neque。 Curabitur ultricies tristique sollicitudin。 Suspendisse malesuada nunc在facilisis ipsum gravida的augue interdum。 Nunc congue sapen sed sem tincidunt ut adipiscing neque lacinia。 Praasent facilisis quad sed tellus sodales id tristique massa ullamcorper。 Donec sem turpis，基本元素的诅咒，libcidunt libero。 Etiam feugiat，sem quis dictum imperdiet，nisl ante pharetra erat，ut ornare nulla justo ac sapien。

我知道很难控制将要切断的内容，等等，但这不是针对这种事情的。 div不包含文本，它包含功能列表，例如X列表可能具有4个功能，Z列表可能具有14个功能，如果列表垂直列出了14个功能，则不进行页面拉伸，我们只希望它显示几下，然后他们必须单击“显示更多”，以使其向下滑动并显示其余部分。

我将如何去做呢？ 甚至用jsfiddle来演示吗？

谢谢 ：）

Answer 1

尝试给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')
            });

Answer 2

这是我的实现的工作演示（碰巧类似于上面给出的答案；在给出任何答案之前我正在这样做）： http : //jsfiddle.net/7fhrN/15/

它适用于不使用JavaScript的用户，并可以优雅地降级您的页面。 尝试在JsFiddle上将JS库切换为随机变量，然后单击Run 。

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> s的类stretchy 。 如果它们太大，我将其替换为带有容器的<div>和底部的链接，该链接将内部<div>的max-height更改为一些可笑的值。

去尝试一下。 看到>让我向您解释。