需求就是,点击“更多按钮”,显示全部的分类详情,再次点击,显示部分分类。

展开:

收起:

结构:

<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:; padding:;}
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!

 

淘宝分类常见---部分显示和全部显示的js效果的更多相关文章

  1. 微信小程序之 Index(仿淘宝分类入口)

    1.逻辑层 index.js //index.js //获取应用实例 const app = getApp() Page({ /** * 页面的初始数据 */ data: { menu: { imgU ...

  2. 淘宝分类导航条;纯css实现固定导航栏

    效果例如以下: 页面例如以下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  3. 四核驱动的三维导航—淘宝新UI(设计篇)

    前面有一篇博客说到了淘宝UWP的"四核驱动的三维导航—淘宝新UI(需求分析篇)",花了两周的时间实现了这个框架,然后又陆陆续续用了三周的时间完善它. 多窗口导航,与传统的导航方式的 ...

  4. (转)淘宝系统信息采集和监控工具tsar

    淘宝系统信息采集和监控工具tsar 项目地址:https://github.com/alibaba/tsar 一.介绍 Tsar是淘宝的系统信息采集和监测工具,主要用来收集服务器的系统信息(如cpu, ...

  5. 爬虫实战【8】Selenium解析淘宝宝贝-获取多个页面

    作为全民购物网站的淘宝是在学习爬虫过程中不可避免要打交道的一个网站,而是淘宝上的数据真的很多,只要我们指定关键字,将会出现成千上万条数据. 今天我们来讲一下如何从淘宝上获取某一类宝贝的信息,比如今天我 ...

  6. Android:实现仿 美团/淘宝 多级分类菜单效果

    本例要实现的是诸如美团/淘宝/百度糯米 多级分类菜单效果.当分类数量许多时能够考虑採用两级分类.而诸如美团这样的表现方式是一个不错的选择. 首先上效果图:      主要代码: 1. PopupWin ...

  7. 一款基于jQuery仿淘宝红色分类导航

    今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览    ...

  8. 【淘宝客】根据淘客联盟精选清单(淘宝天猫内部优惠券)随机显示淘宝天猫优惠券dome

    也许大家在生活中经常淘宝看到[淘宝天猫内部优惠券]的网站,或者在微博中经常有博主发券,让大家生活中购物便宜许多,作为一个站长,我们也希望自己的网站也能有这样的一个功能,现在就分享给大家,还是免后台哦. ...

  9. 上传控件---淘宝kissy uploader+瀑布流显示

    介绍Uploader : Uploader 是由阿里集团前端工程师们发起创建的一个开源 JS 框架.它具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性. Uploader是非 ...

随机推荐

  1. android自定义View_1——Custom Drawing

    前言:自定义view重要的部分就是view的展示样式,为了实现view的样式可以重写onDraw()方法. 一:Override onDraw() 1.当覆盖了onDraw()方法后,需要一个Canv ...

  2. Ubuntu 14.04 Vim编辑文件的一般操作

    vim编辑文件的一般操作 1. vim #在命令行中输入vim,进入vim编辑器 2. i #按一下i键,下端显示 --INSERT-- #插入命令,在vim中可能任意字符都有作用 3. Esc #退 ...

  3. sql 注入安全过滤-安全模块

    <?php /** * 安全模块 * Email:zhangyuan@tieyou.com * 主要针对xss跨站攻击.sql注入等敏感字符串进行过滤 * @author hkshadow */ ...

  4. jmeter3.3测试webservice 接口

    1.天气预报网站,提供webservice接口 http://www.webxml.com.cn/WebServices/WeatherWebService.asmx 2.选择测试的接口getSupp ...

  5. Harmonic Value Description(构造题)

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Submission ...

  6. 《UNIX网络编程》 -- 第五章

    str_cli 和 str_echo 函数 需要先弄清楚 3.9 readn.writen 和 readline 函数 str_cli void str_cli(FILE *fp, int sockf ...

  7. 自定义admin

    平时我们用的django自带admin,怎么评价呢?一个字简陋,而且也人性化,如下图,首先只显示数据对象,如果要查看详细还有点进去,其次不能对自己想要的数据进行刷选 我们的期望是:数据如excel显示 ...

  8. mysql练手

    1.根据图创建下列表格 没有外键的表先创建,创建顺序为teacher,class,course,student CREATE TABLE class ( cid INT NOT NULL auto_i ...

  9. DBProxy 入门到精通系列(一):DBProxy概述

    DBProxy概述 DBProxy是支持分库分表,读写分离的中间件,博客内容除了阅读github官方文档外,还会附加上本人个人测试的结果,但了解一个中间件,需要对这个中间件有一个基本的认识,方便控制. ...

  10. python面向对象(二)

    属性查找 类有两种属性:数据属性和函数属性 1. 类的数据属性是所有对象共享的 2. 类的函数属性是绑定给对象用的 class BeijingStudent:   school='Beijing'  ...