<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>展开/收缩效果切换</title> <style> #box .hid{display:none;} #box .show{display:block;} #tog{cursor: pointer} li{list-style: none} </style> </head> <body> <ul id="box"> <li>我是当前显示的内容</li> <li>我是当前显示的内容</li> <li>我是当前显示的内容</li> <li>我是当前显示的内容</li> <li>我是当前显示的内容</li> <li>我是当前显示的内容</li> <li>我是当前显示的内容</li> <li>我是当前显示的内容</li> <li>我是当前显示的内容</li> <li>我是当前显示的内容</li> <li>我是当前显示的内容</li> <li>我是当前显示的内容</li> <li>我是当前显示的内容</li> <li>我是当前显示的内容</li> <li>我是当前显示的内容</li> <li>我是当前显示的内容</li> <li>我是当前显示的内容</li> <li>我是当前显示的内容</li> <li>我是当前显示的内容</li> </ul> <p id="tog">展开</p> <script type="text/javascript" src="http://files.cnblogs.com/files/heyiming/jquery-2.1.4.min.js"></script> <script> var len=$("#box li").length; function int(){ //设置显示多少条 for(i=8;i<len;i++){ $("#box li").eq(i).addClass("hid"); } } $("#tog").click(function(){ var t=$(this).text(); if(t=="展开"){ $("#box .hid").addClass("show"); $(this).text("收缩"); }else{ $("#box .hid").removeClass("show"); $(this).text("展开"); } }); int();//初始化隐藏多余标签 </script> </body> </html>
效果图：
原文：http://www.cnblogs.com/heyiming/p/6599944.html