jq精简显示(隐藏)文本

1.  *{
2.      margin: 0;
3.      padding: 0;
4.    }
5.    .box{
6.      width: 300px;
7.      height: auto;
8.      margin: 0 auto;
9.    }
10.     .box2{
11.       border: 1px solid #999;
12.       width: 300px;
13.       float: left;
14.     }
15.     .box2 ul{
16.       width: 300px;
17.       float: left;
18.     }
19.     .box2 ul li{
20.       list-style: none;
21.       width: 100px;
22.       height: 30px;
23.       float: left;
24.       text-align: center;
25.       line-height: 30px;
26.       color: #00f;
27.     }
28.     .box2 p{
29.       color: #00f;
30.       width: 100px;
31.       height: 30px;
32.       float: left;
33.       line-height: 30px;
34. 
35.     }
36.     .box2 span{
37.       width: 300px;
38.       height: 30px;
39.       display: block;
40.       text-align: center;
41.       float: left;
42.       color: #00f;
43.       margin-top: 10px;
44.     }
45.     .box2 .active{
46.       color: #f00;
47.     }
48.     /*.box2 ul li:lt(6){
49.       display: none;
50.     }*/

1. <div class="box">
2.      <div class="box2">
3.        <ul>
4.        <li class="active">李白</li>
5.        <li>李贺</li>
6.        <li class="active">纳兰性德</li>
7.        <li>纳兰嫣然</li>
8.        <li>贺知章</li>
9.        <li>杜甫</li>
10.         <li>杜牧</li>
11.         <li>林东</li>
12.         <li>萧炎</li>
13.         <li>萧萧</li>
14.         <li>其他类型</li>
15.       </ul>
16. 
17.       <span>精简显示</span>
18.       </div>
19.     </div>

1. //点击span标签切换文本
2.    $("span").on("click",function(){
3.      // 获取 第6个li 文本内容
4.      var word = $(".box2 ul li:nth-child(7)").text()
5.      if ($(this).text()=="精简显示") {
6.        $(this).text("显示全部")
7.        // 多余的隐藏
8.        $(".box2 ul li:gt(6)").hide()
9.        // 修改文本
10.         $(".box2 ul li:nth-child(7)").text("其他类型")
11.         // 修改高亮显示
12.         $(".active").css("color","#00f")
13. 
14.       } else{
15.         // 修改文本
16. 
17.         $(this).text("精简显示")
18.         // 多余的显示
19.         $(".box2 ul li:gt(6)").show()
20.         // 修改文本
21. 
22.         $(".box2 ul li:nth-child(7)").text(word)
23.         // 修改高亮显示
24.         $(".active").css("color","#f00")
25.       }
26. 
27. 
28.     })
29.