<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
??? <head>
??????? <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
??????? <title>Untitled Document</title>
??????? <style type="text/css">
??????????? ul {
??????????????? width: 250px;
??????????????? height: 290px;
??????????????? font-size: 16px;
??????????????? font-family: "Blackadder ITC";
??????????????? color: #22dddd;
??????????????? background-color: #123456;
??????????? }
????????? ?
??????????? .highlight {
??????????????? color: red;
??????????? }
????????? ?
??????????? #btn {
??????????????? width: 60px;
??????????????? height: 20px;
??????????????? font-size: 13px;
??????????????? text-align: center;
??????????????? position: absolute;
??????????????? margin: 0 0 0 30px;
??????????? }
??????? </style>
??????? <script type="text/javascript" src="jquery.min.js">
??????? </script>
??????? <script type="text/javascript">
??????????? $(function(){
??????????????? $all=$("#all li:gt(5)");
??????????????? $("#btn").click(function(){
??????????????????? if($all.is(":hidden")){
??????????????????????? $all.hide().show("fast");
??????????????????????? $("#btn").val("big");
??????????????????????? $("#all li").filter(":contains('canno'),:contains('microsoft')").addClass("highlight");
??????????????????? }else{
??????????????????????? $all.show().hide("fast");
??????????????????????? $("#btn").val("small");
?? ??? ??? ??? ??? ??? ?$("#all li").filter(":contains('canno'),:contains('microsoft')").removeClass("highlight");
??????????????????? }
??????????????? });
??????????? })? ;??????????????????????? ?
????????????????????????????? ?
????????????????? ?
??????? </script>
??? </head>
??? <body>
??????? <ul id="all">
??????????? <li>
??????????????? lenovo
??????????? </li>
??????????? <li>
??????????????? dell
??????????? </li>
??????????? <li>
??????????????? hp
??????????? </li>
??????????? <li>
??????????????? microsoft
??????????? </li>
??????????? <li>
??????????????? sun
??????????? </li>
??????????? <li style="display:none;">
??????????????? cisco
??????????? </li>
??????????? <li style="display:none;">
??????????????? intel
??????????? </li>
??????????? <li style="display:none;">
??????????????? amd
??????????? </li>
??????????? <li style="display:none;">
??????????????? canno
??????????? </li>
??????????? <li style="display:none;">
??????????????? apple
??????????? </li>
??????????? <li style="display:none;">
??????????????? ibm
??????????? </li>
??????????? <li style="display:none;">
??????????????? acer
??????????? </li>
??????????? <li style="display:none;">
??????????????? sony
??????????? </li>
??????????? <li style="display:none;">
??????????????? toshiba
??????????? </li>
??????????? <li style="display:none;">
??????????????? sumsung
??????????? </li>
??????? </ul>
??????? <input type="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>
??????? <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
??????? <title>Untitled Document</title>
??????? <style type="text/css">
??????????? ul {
??????????????? width: 250px;
??????????????? height: 290px;
??????????????? font-size: 16px;
??????????????? font-family: "Blackadder ITC";
??????????????? color: #22dddd;
??????????????? background-color: #123456;
??????????? }
???????????
??????????? .highlight {
??????????????? color: red;
??????????? }
???????????
??????????? #btn {
??????????????? width: 60px;
??????????????? height: 20px;
??????????????? font-size: 13px;
??????????????? text-align: center;
??????????????? position: absolute;
??????????????? margin: 0 0 0 30px;
??????????? }
??????? </style>
??????? <script type="text/javascript" src="jquery.min.js">
??????? </script>
??????? <script type="text/javascript">
??????????? $(function(){
??????????????? $all = $("#all li:gt(5)");
??????????????? $("#btn").toggle(function(){
??????????????????? $all.hide().show("fast");
??????????????????? $("#btn").val("big");
??????????????????? $("#all li").filter(":contains('canno'),:contains('microsoft')").addClass("highlight");
??????????????? }, function(){
??????????????????? $all.show().hide("fast");
??????????????????? $("#btn").val("small");
??? ??? ??? ??? ??? $("#all li").filter(":contains('canno'),:contains('microsoft')").removeClass("highlight");
??????????????? });
??????????? });
??????? </script>
??? </head>
??? <body>
??????? <ul id="all">
??????????? <li>
??????????????? lenovo
??????????? </li>
??????????? <li>
??????????????? dell
??????????? </li>
??????????? <li>
??????????????? hp
??????????? </li>
??????????? <li>
??????????????? microsoft
??????????? </li>
??????????? <li>
??????????????? sun
??????????? </li>
??????????? <li style="display:none;">
??????????????? cisco
??????????? </li>
??????????? <li style="display:none;">
??????????????? intel
??????????? </li>
??????????? <li style="display:none;">
??????????????? amd
??????????? </li>
??????????? <li style="display:none;">
??????????????? canno
??????????? </li>
??????????? <li style="display:none;">
??????????????? apple
??????????? </li>
??????????? <li style="display:none;">
??????????????? ibm
??????????? </li>
??????????? <li style="display:none;">
??????????????? acer
??????????? </li>
??????????? <li style="display:none;">
??????????????? sony
??????????? </li>
??????????? <li style="display:none;">
??????????????? toshiba
??????????? </li>
??????????? <li style="display:none;">
??????????????? sumsung
??????????? </li>
??????? </ul>
??????? <input type="button" id="btn" value="small"/>
??? </body>
</html>
toggle()方法的效果就是切换元素的可见状态；即如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
下面说一下toggle(fn,fn)方法的使用，效果是：每次点击后依次调用函数；如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一 元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。注意这里本身已经有点击触发 调用函数的功能，不需要另外.click(fn)了
1. 代码贴得希望能够整齐些。全蓝的看着眼花。
2. 函数封装希望能够更加独立些。应独立于特定应用，不应与html，CSS等混杂。
LZ能把代码整理下吗。。。。。