jquery点击按钮显示及隐藏元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>UntitledDocument</title>
<styletype="text/css">
ul{
width:250px;
height:290px;
font-size:16px;
font-family:"BlackadderITC";
color:#22dddd;
background-color:#123456;
}
.highlight{
color:red;
}
#btn{
width:60px;
height:20px;
font-size:13px;
text-align:center;
position:absolute;
margin:00030px;
}
</style>
<scripttype="text/javascript"src="jquery.min.js">
</script>
<scripttype="text/javascript">
$(function(){
$all=$("#allli:gt(5)");
$("#btn").click(function(){
if($all.is(":hidden")){
$all.hide().show("fast");
$("#btn").val("big");
$("#allli").filter(":contains('canno'),:contains('microsoft')").addClass("highlight");
}else{
$all.show().hide("fast");
$("#btn").val("small");
$("#allli").filter(":contains('canno'),:contains('microsoft')").removeClass("highlight");
}
});
});
</script>
</head>
<body>
<ulid="all">
<li>
lenovo
</li>
<li>
dell
</li>
<li>
hp
</li>
<li>
microsoft
</li>
<li>
sun
</li>
<listyle="display:none;">
cisco
</li>
<listyle="display:none;">
intel
</li>
<listyle="display:none;">
amd
</li>
<listyle="display:none;">
canno
</li>
<listyle="display:none;">
apple
</li>
<listyle="display:none;">
ibm
</li>
<listyle="display:none;">
acer
</li>
<listyle="display:none;">
sony
</li>
<listyle="display:none;">
toshiba
</li>
<listyle="display:none;">
sumsung
</li>
</ul>
<inputtype="button"id="btn"value="small"/>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>UntitledDocument</title>
<styletype="text/css">
ul{
width:250px;
height:290px;
font-size:16px;
font-family:"BlackadderITC";
color:#22dddd;
background-color:#123456;
}
.highlight{
color:red;
}
#btn{
width:60px;
height:20px;
font-size:13px;
text-align:center;
position:absolute;
margin:00030px;
}
</style>
<scripttype="text/javascript"src="jquery.min.js">
</script>
<scripttype="text/javascript">
$(function(){
$all=$("#allli:gt(5)");
$("#btn").toggle(function(){
$all.hide().show("fast");
$("#btn").val("big");
$("#allli").filter(":contains('canno'),:contains('microsoft')").addClass("highlight");
},function(){
$all.show().hide("fast");
$("#btn").val("small");
$("#allli").filter(":contains('canno'),:contains('microsoft')").removeClass("highlight");
});
});
</script>
</head>
<body>
<ulid="all">
<li>
lenovo
</li>
<li>
dell
</li>
<li>
hp
</li>
<li>
microsoft
</li>
<li>
sun
</li>
<listyle="display:none;">
cisco
</li>
<listyle="display:none;">
intel
</li>
<listyle="display:none;">
amd
</li>
<listyle="display:none;">
canno
</li>
<listyle="display:none;">
apple
</li>
<listyle="display:none;">
ibm
</li>
<listyle="display:none;">
acer
</li>
<listyle="display:none;">
sony
</li>
<listyle="display:none;">
toshiba
</li>
<listyle="display:none;">
sumsung
</li>
</ul>
<inputtype="button"id="btn"value="small"/>
</body>
</html>
toggle()方法的效果就是切换元素的可见状态；即如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
下面说一下toggle(fn,fn)方法的使用，效果是：每次点击后依次调用函数；如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。注意这里本身已经有点击触发调用函数的功能，不需要另外.click(fn)了