淘宝分类常见---部分显示和全部显示的js效果
需求就是,点击“更多按钮”,显示全部的分类详情,再次点击,显示部分分类。
展开:
收起:
结构:
<div class="SubBox" id="SubBox"> <ul> <li ><a href="#">佳能</a><i>(30440) </i></li> <li ><a href="#">索尼</a><i>(27220) </i></li> <li ><a href="#">三星</a><i>(20808) </i></li> <li ><a href="#">尼康</a><i>(17821) </i></li> <li ><a href="#">松下</a><i>(12289) </i></li> <li ><a href="#">卡西欧</a><i>(8242) </i></li> <li ><a href="#">富士</a><i>(14894) </i></li> <li ><a href="#">柯达</a><i>(9520) </i></li> <li ><a href="#">宾得</a><i>(2195) </i></li> <li ><a href="#">理光</a><i>(4114) </i></li> <li ><a href="#">奥林巴斯</a><i>(12205) </i></li> <li ><a href="#">明基</a><i>(1466) </i></li> <li ><a href="#">爱国者</a><i>(3091) </i></li> <li ><a href="#">其它品牌相机</a><i>(7275) </i></li> </ul> <div class="showmore" id="ShowMore"><a href="javascript:;"><span>显示全部品牌</span></a></div></div>
样式:
*{ margin:0; padding:0;} body {font-size:12px;text-align:center;} a { color:#04D; text-decoration:none;} a:hover { color:#F50; text-decoration:underline;} .SubBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;} .SubBox ul { list-style:none;} .SubBox ul li { display:block; float:left; width:200px; line-height:20px;} .showmore { clear:both; text-align:center;padding-top:10px;} .showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;} .showmore a span { padding-left:15px; background:url(../img/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
js代码:
<script> $(function(){ var $SubBox=$(‘#SubBox li:gt(5):not(:last)‘); var $ShowMore=$(‘#ShowMore‘); $SubBox.hide(); $ShowMore.click(function(){ if($SubBox.is(‘:visible‘)){ $SubBox.hide(); $ShowMore.find(‘span‘) .text("显示全部品牌") //.css(‘background‘,‘url(../images/down.gif)‘); } else{ $SubBox.show(); $ShowMore.find(‘span‘) .text("精简显示品牌") //.css(‘background‘,‘url(../images/up.gif)‘); } }) }); </script>
总结:这个例子中所使用的jquery
1、 过滤选择器。li:gt(5):not(:last) 从第六个元素开始,除了最后一个元素的所有li元素。
2、 显示隐藏 show(); hide();
3、 css(‘name‘,‘value‘)给元素设置样式;
4、find(‘子元素‘); 另外还有一个filter(‘对他本身的元素操作‘); 例如 找到的是自己本身的li,样式写在promoted a上面。
$SubBox.filter(":contains(‘柯达‘),:contains(‘爱国者‘),:contains(‘佳能‘)").addClass(‘promoted‘);
效果很简单,come on!
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。