jQuery .. div顯示/幻燈片？

Question

我有一個div，裏面有內容。

內容可能很長，或內容可能非常小。

我不希望內容在頁面加載時拉長頁面，如果它很長，我希望它們點擊一個「更多」鏈接，它會滑下並顯示其餘內容。

例如：

Lorem存有悲坐阿梅德，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。個人簡歷lacus neque。 Curabitur ultricies tristique sollicitudin。在facusis ipsum gravida的augue interdum上懸掛的malesuada nunc。

下面是酒吧或鏈接，說「顯示其餘」截至上點擊

，這個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。 個人簡介lacus neque。 Curabitur ultricies tristique sollicitudin。 Suspendisse malesuada nunc at augure 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來證明它？

謝謝:)

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，並優雅地降低您的網頁。嘗試將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>替換它們，底部有一個容器和一個鏈接，將內部<div>的max-height更改爲一些荒謬的價值。

試試吧。看到>讓我解釋給你。