快捷導(dǎo)航

jQuery 學(xué)習(xí)6 操縱元素顯示效果的函數(shù)

更新時間：2010年02月07日 10:14:56 作者：

jQuery提供了hide() ,show()對元素進行隱藏和顯示，下面看兩個函數(shù)的應(yīng)用

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Collapsible List &mdash; Take 1</title> 
<link rel="stylesheet" type="text/css" href="../common.css"> 
<script type="text/javascript" 
src="../scripts/jquery-1.2.1.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$('li:has(ul)') 
.click(function(event){ 
if (this == event.target) { 
if ($(this).children().is(':hidden')) { 
$(this) 
.css('list-style-image','url(minus.gif)') 
.children().show(); 
} 
else { 
$(this) 
.css('list-style-image','url(plus.gif)') 
.children().hide(); 
} 
} 
return false; 
}) 
.css('cursor','pointer') 
.click(); 
$('li:not(:has(ul))').css({ 
cursor: 'default', 
'list-style-image':'none' 
}); 
}); 
</script> 
<style> 
fieldset { width: 320px } 
</style> 
</head> 
<body> 
<fieldset> 
<legend>Collapsible List &mdash; Take 1</legend> 
<ul> 
<li>Item 1</li> 
<li>Item 2</li> 
<li> 
Item 3 
<ul> 
<li>Item 3.1</li> 
<li> 
Item 3.2 
<ul> 
<li>Item 3.2.1</li> 
<li>Item 3.2.2</li> 
<li>Item 3.2.3</li> 
</ul> 
</li> 
<li>Item 3.3</li> 
</ul> 
</li> 
<li> 
Item 4 
<ul> 
<li>Item 4.1</li> 
<li> 
Item 4.2 
<ul> 
<li>Item 4.2.1</li> 
<li>Item 4.2.2</li> 
</ul> 
</li> 
</ul> 
</li> 
<li>Item 5</li> 
</ul> 
</fieldset> 
</body> 
</html> 

上面實現(xiàn)列表的折疊已經(jīng)很簡單了，但jQuery提供了一個切換元素狀態(tài)的函數(shù)toggle()。將上面紅色字體的代碼改為下面的代碼，同樣可以實現(xiàn)上述功能：
$(this).children().toggle();
$(this).css('list-style-image',
($(this).children().is(':hidden')) ?
'url(plus.gif)' : 'url(minus.gif)');
}
以上三個函數(shù)show()、hide()、toggle()在帶參數(shù)的情況下可以實現(xiàn)元素逐漸的顯示和隱藏
hide(speed,callback)
show(speed,callback)
toggle(speed,callback)
speed:可為數(shù)字或字符串，把效果的持續(xù)時間(可選)指定為毫秒數(shù)或預(yù)定義的字符串之一：slow、normal或fast。如果省略，就不產(chǎn)生動畫并立即在顯示屏上顯示元素。
callback：回調(diào)函數(shù)(可選),在動畫完成時調(diào)用。沒有參數(shù)傳遞給這個函數(shù)，但函數(shù)上下文(this)被設(shè)置為以動畫隱藏的元素。

動畫效果的可折疊列表

復(fù)制代碼代碼如下:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Collapsible List &mdash; Take 3</title> 
<link rel="stylesheet" type="text/css" href="../common.css"> 
<script type="text/javascript" 
src="../scripts/jquery-1.2.1.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$('li:has(ul)') 
.click(function(event){ 
if (this == event.target) { 
$(this).css('list-style-image', 
(!$(this).children().is(':hidden')) ? 
'url(plus.gif)' : 'url(minus.gif)'); 
$(this).children().toggle('slow'); 
} 
return false; 
}) 
.css({cursor:'pointer', 
'list-style-image':'url(plus.gif)'}) 
.children().hide(); 
$('li:not(:has(ul))').css({ 
cursor: 'default', 
'list-style-image':'none' 
}); 
}); 
</script> 
<style> 
fieldset { width: 320px } 
</style> 
</head> 
<body> 
<fieldset> 
<legend>Collapsible List &mdash; Take 3</legend> 
<ul> 
<li>Item 1</li> 
<li>Item 2</li> 
<li> 
Item 3 
<ul> 
<li>Item 3.1</li> 
<li> 
Item 3.2 
<ul> 
<li>Item 3.2.1</li> 
<li>Item 3.2.2</li> 
<li>Item 3.2.3</li> 
</ul> 
</li> 
<li>Item 3.3</li> 
</ul> 
</li> 
<li> 
Item 4 
<ul> 
<li>Item 4.1</li> 
<li> 
Item 4.2 
<ul> 
<li>Item 4.2.1</li> 
<li>Item 4.2.2</li> 
</ul> 
</li> 
</ul> 
</li> 
<li>Item 5</li> 
</ul> 
</fieldset> 
</body> 
</html> 