使用jQuery擴展內容（手風琴技術）…快速提問

Question

這可能是一個愚蠢的問題，但是我剛開始在jQuery中做一些漂亮的事情，突然間我想知道如何解決一個在沒有框架幫助的情況下我從來沒有打擾過的問題。

假設我們有兩個div元素：

<body>
    <div id="lorem1" style="display:block; height:400px;">
        Lorem ipsum...
    </div>
    <div id="lorem2" style="display:hidden;">
        dolor sit amet...
    </div>
</body>

現在，如果我們想使用手風琴效果來縮小第一個div的存在而將第二個div擴大為存在，那么我假設我們將具有以下簡單邏輯：

迭代地降低#lorem1的高度，直到達到0
將#lorem1設置為display:none;
將#lorem2設置為display:block; height:0; display:block; height:0;
迭代地增加#lorem2的高度

然后是問題...增加lorem2的高度...直到什么時候？ 我們如何知道元素的最終高度？ 顯然，我們不能選擇“直到它增加到400px”之類的靜態值，因為lorem2的內容可能超過400像素高。 或者，如果小於400像素，則頁面上的任何背景色/圖像或其他元素可能看起來都不正確。

那么，如何確定何時停止手風琴呢？

Answer 1

使用jQuery，您可以使用方便的toggle屬性：

$('#lorem').animate({
  height: 'toggle'
});

我確信其他js庫也提供了類似的可能性。

編輯：另一種方法是將對象設置動畫，直到高度為auto 。 或者不要通過CSS隱藏它，通過JS獲取對象的尺寸，然后再使用JS隱藏它。 現在您知道了尺寸，可以再次顯示它。

Answer 2

我認為.slideDown（）和.slideUp（）將為您做到這一點： http ://api.jquery.com/slideDown/

使用jQuery擴展內容（手風琴技術）…快速提問

問題描述

2 個解決方案

解決方案1
0 已采納 2010-10-28 23:08:41

解決方案2
0 2010-10-28 23:34:58

使用jQuery擴展內容（手風琴技術）…快速提問

問題描述

2 個解決方案

解決方案1 0 已采納 2010-10-28 23:08:41

解決方案2 0 2010-10-28 23:34:58

解決方案1
0 已采納 2010-10-28 23:08:41

解決方案2
0 2010-10-28 23:34:58