jQuery 的toggle()函数使用show()或hide()函数来切换HTML元素的可见状态。
语法:
$(selector).toggle(speed,callback,switch);
参数说明:
callback是toggle函数执行完之后要执行的函数,若要用callback参数则必须设置speed参数。
switch布尔值,规定toggle是否隐藏或显示所有的元素。
示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(function(){
$("#expend").toggle(function(){
$("#table").hide();
$("#expend").text("展开");
},function(){
$("#table").show();
$("#expend").text("收缩");
});
})
</script>
</HEAD>
<BODY>
<div><span id="expend" align="right">收缩</span></div>
<table id="table">
<tr>
<td>first</td>
</tr>
<tr>
<td>second</td>
</tr>
<tr>
<td>third</td>
</tr>
</table>
</BODY>
</HTML>
当有多个HTML元素要实现这个功能,如示例中有多个table要实现伸缩,我们没必要写多个的toggle函数,因为我们可以去构造相应的id或者name属性来却别不同的HTML元素,有时候我们大多数是从数据库中的数据传到页面上,此时我们可以用id或者可以却别的属性来设置。