Home » jQuery 問題分享

[jQ]讓固定高度的區塊也能滑動展開超出範圍的高度

範例 1
範例 2
沒錯!只要 900 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!

問題出處:http://stackoverflow.com/quest......eight-and-overflow

有個 HTML 是這樣:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
	<div class="text">
		這是一段很~~<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		長的區塊
	</div>
	<div class="button">Show</div>
</body>

然後 .text 是設定成:

1
2
3
4
.text{
	height: 100px;
	overflow: hidden;
}

.text 區塊高度被固定 100px 了,而其它超出的範例是因為 overflow: hidden; 被隱藏的。所以原發問者的問題是想要讓 .text 能滑動展開完整的高度。

之前筆者是會再用另一個區塊來包裹並做一些手腳,但 ShankarSangoli 利用神不知鬼不覺的 height: auto; 來取得完整高度後再進行處理:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
$(function(){
	$(".button").click(function(){
		var $text = $(".text");
		var contentHeight = $text.addClass('heightAuto').height();
 
		$text.removeClass('heightAuto').animate({ 
			height: (contentHeight == $text.height() ? 100 : contentHeight)
		}, 500);
	});
})

不過這缺點會在因為當縮回去時寫死高度了,變成執行一次展開收合後就會失效了。所以若能在第一次展開時就把完整高度記錄起來的話,也許就簡單多了:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(function(){
	$(".button").click(function(){
		var $text = $(".text");
		// 先取得是否有記錄在 .data('contentHeight') 中
		var contentHeight = $text.data('contentHeight');
 
		// 若沒有記錄
		if(!!!contentHeight){
			// 取得完整的高
			contentHeight = $text.addClass('heightAuto').height();
			// 並記錄在 .data('contentHeight') 中
			$text.data('contentHeight', contentHeight).removeClass('heightAuto');
		}
 
		// 進行折疊
		$text.stop().animate({ 
			height: (contentHeight == $text.height() ? 100 : contentHeight)
		}, 500);
	});
})

至於 Kato 則是複製一個完整的 .text 區塊後,再取得該複製區塊的完整高度來使用:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
$(function(){
	$('.button').click(function() {
		var $div = $('div.text');
		$div.animate({height: determineActualHeight($div)});
	});
 
	function determineActualHeight($div) {
		var $clone = $div.clone().hide().css('height', 'auto').appendTo($div.parent()),
		height = $clone.height();
		$clone.remove();
		return height;
	}
})

這是一個很有趣但是有點耗效能的用法,所以筆者也一樣是在第一次取得完整高度時就先記錄起來:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(function(){
	$('.button').click(function() {
		var $div = $('div.text');
		// 先取得是否有記錄在 .data('contentHeight') 中
		var contentHeight = $div.data('contentHeight');
 
		// 若沒有記錄
		if(!!!contentHeight){
			// 取得完整的高
			contentHeight = determineActualHeight($div);
			// 並記錄在 .data('contentHeight') 中
			$div.data('contentHeight', contentHeight);
		}
 
		// 進行折疊
		$div.stop().animate({ 
			height: (contentHeight == $div.height() ? 100 : contentHeight)
		}, 500);
	});
 
	function determineActualHeight($div) {
		var $clone = $div.clone().hide().css('height', 'auto').appendTo($div.parent()),
		height = $clone.height();
		$clone.remove();
		return height;
	}
})

但如果 .text 區塊的內容是會一直動態改變的話,筆者是建議採用每次複製區塊的方式來取得高度,這樣的高度才能時時更新。

範例 1 範例 2 範例 3 範例 4

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

發表迴響