首页 > 代码库 > 展开/收缩效果切换
展开/收缩效果切换
<!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>
效果图：
展开/收缩效果切换
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。