將DIV設置爲全高並將其切換回指定高度

我試圖在按下按鈕時將div的高度設置爲其全高，並且如果再次單擊該按鈕，則會回到原始高度。由於它包含具有不同字數的文本，因此div的完整高度是自動的。我試着做下面的代碼，但它不能正常工作。將DIV設置爲全高並將其切換回指定高度

的CSS：

.category_brief{ 
    text-align:justify; 
    height:100px; 
    overflow:hidden; 
}

例1：打開到完全高度時，此代碼不動畫股利，但在回來的老動畫的高度。

$(".slide").toggle(function(){ 
    $('.category_brief').animate({height:'100%'},200); 
    },function(){ 
    $('.category_brief').animate({height:100},200); 
    });

實施例2：這個代碼的輸出是相同的實施例1

實施例3的

var toggle = true, oldHeight = 0; 

$('.slide').click(function(event) { 
    event.preventDefault(); 

    var $ele = $('.category_brief'); 
    var toHeight = ((toggle = !toggle) ? oldHeight : newHeight); 

    oldHeight = $ele.height(); 
    var newHeight = $ele.height('auto').height(); 
    $ele.animate({ height: toHeight }); 

});

：此代碼動畫在div其滿高度，但不進行切換。

var slide = $('.slide'); 
    var slidepanel = $('.category_brief'); 
    // On click, animate it to its full natural height 
    slide.click(function(event) { 
     event.preventDefault(); 
    var oldHeight, newHeight; 

    // Measure before and after 
    oldHeight = slidepanel.height(); 
    newHeight = slidepanel.height('auto').height(); 

    // Put back the short height (you could grab this first 
    slidepanel.height(oldHeight); 
    slidepanel.animate({height: newHeight + "px"}); 
    });

如果可能，請提供一點解釋也因爲我是一個新手..

更新：從@chazm的想法解決了..

@chazm：感謝您的想法。我通過結合第一個和第三個例子來解決問題......以下是任何需要它的代碼。

var slidepanel = $('.category_brief'); 
    $(".slide").toggle(function(){ 
    var oldHeight, newHeight; 

    // Measure before and after 
    oldHeight = slidepanel.height(); 
    newHeight = slidepanel.height('auto').height(); 

    // Put back the short height (you could grab this first 
    slidepanel.height(oldHeight); 
    slidepanel.animate({height: newHeight + "px"}) 
    },function(){ 
    $('.category_brief').animate({height:100},300); 
    });

來源

2011-07-18 Harjeet Singh

@Wesley Murch：現在刪除.... –

使用'自動'高度它總是非常棘手。我認爲你的例子中有不同的問題。

1）瀏覽器無法定義正確的100％高度。可能的解決方案 - 爲所有父母定義身高。將它設置爲100％（直到html標籤）或將最接近的父項設置爲相對（因爲高度是從最近的相對父項計算的）。如果你想動畫DIV整個頁面的100％ - 認爲絕對定位

2）相同的如上面我以爲

3）當此代碼應該切換回它無法確定它現在應該變得更低。不完全確定爲什麼。可能是因爲100％的「自動」高度設置錯了。您可以檢查螢火蟲在該功能切換回來之後它在計算選項卡上具有的值。可能它會給你一個線索

嘗試結合2）和3）。這個想法 - 如果切換是真的（它應該降低），然後設置newHeight = slidepanel.height（'100'）。

來源

2011-07-18 10:02:26 chaZm

解決方案取決於您的實施需求。如果你知道，首先div應該是100px等高度，當你點擊時，它最大化到未知的高度，下面的解決方案將起作用。如果你也有類似的結構，以

<div class="outer"> 
    <div class="wrapper">Content of unknown length here</div> 
</div>

和CSS

div.wrapper { position:relative; height:100px; overflow:hidden; } 
div.outer { position:absolute; height:auto; }

，那麼你會得到一個div是在高度100像素，與不適合100像素切斷內容。現在，當你按下所需的按鈕時，你可以得到包裝div的高度，因爲它的內容是很長的（儘管你只能看到頂部100px）並根據它設置外部div的高度。像這樣

var newHeight = $('div.wrapper').height(); 
$('div.outer').animate({height:newHeight},200);

然後動畫的外部div顯示整個內容。當你再次點擊按鈕時，你可以做

$('div.outer').animate({height:'100px'},200);

而且你將再次只有100px的高度。

來源

2011-07-18 10:07:09 zatatatata

將DIV設置爲全高並將其切換回指定高度

回答

相關問題