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更改為一些可笑的值。

去嘗試一下。 看到>讓我向您解釋。