源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="javascript" src="http://www.u88.cn/images/jquery.js"></script> <title>无标题文档</title> <style type="text/css"> *{ margin:0px; padding:0px;} ul,li{ list-style:none; display:block;} .check{ width:510px; display:block; background:#d5d5d5; overflow:hidden; height:150px;} .check li{ float:left; width:120px; height:30px; text-align:center; line-height:30px; background:#f3f3f3; margin-left:5px; margin-top:5px; cursor:pointer;} .check li.back_1{ background:#FF8000;} </style> </head> <body> <ul class="check"> <li>外景</li> <li>夜景</li> <li >中式</li> <li id="more" style="background:#999">更多</li> <li>韩式</li> <li>田园</li> <li>海洋风</li> <li>复古</li> <li>韩式</li> <li>小清新</li> <li>唯美</li> <li>浪漫</li> <li>时尚</li> <li>创意</li> <li>韩式</li> <li id="sq" style="background:#999">收起</li> </ul> <script language="javascript"> $(document).ready(function(e) { //初始化 var starts = 0; var check = $('.check'); var check_li = $('.check li'); check_li.eq(starts).addClass('back_1'); var _more = 0;//初始化more位置 var _sq = 0;//初始化sq位置 check_li.each(function(i, e) { if(e.getAttribute('id')&&e.getAttribute('id')=="more"){ _more = i; } if(e.getAttribute('id')&&e.getAttribute('id')=="sq"){ _sq = i; } }); //初始化显示/隐藏 check_li.each(function(i, e) { if(i>_more){ e.style.display="none"; } }); //点击事件more var first = 0; check_li.click(function(){ var _index = $(this).index(); if(_index == _more){ check_li.show(); check_li.eq(_more).hide(); }else if(_index == _sq){ check_li.each(function(i, e) { if(i>_more){ e.style.display="none"; } }); check_li.eq(_more).show(); }else if(_index == 0){ //表示清空 check_li.removeClass('back_1'); $(this).addClass('back_1'); }else{ if(_index!=0){ //判断 此处用togo也可以不过速度没这个快 if($(this).hasClass('back_1')){ first--; $(this).removeClass('back_1'); }else{ first++; $(this).addClass('back_1'); } } if(first<=0){ $('.check li:first').addClass('back_1'); }else{ $('.check li:first').removeClass('back_1'); } }//else }); //鼠标划走 $('.check').hover(function(){ },function(){ check_li.each(function(i, e) { if(i>_more){ e.style.display="none"; } }); check_li.eq(_more).show(); }); }); </script> </body> </html>
- 外景
- 夜景
- 中式
- 更多
- 韩式
- 田园
- 海洋风
- 复古
- 韩式
- 小清新
- 唯美
- 浪漫
- 时尚
- 创意
- 韩式
- 收起
