<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>品牌列表</title>

    <link rel="stylesheet" type="text/css" href="css/index1.css">

    <script type="text/javascript" src="scripts/jquery-1.12.0.js"></script>

</head>

<body>

    <div class="SubCategoryBox">

        <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>(32222)</i></li>

            <li><a href="#">卡西欧</a><i>(30240)</i></li>

            <li><a href="#">富士</a><i>(30449)</i></li>

            <li><a href="#">柯达</a><i>5440)</i></li>

            <li><a href="#">宾得</a><i>(12340)</i></li>

            <li><a href="#">理光</a><i>(56740)</i></li>

            <li><a href="#">奥林巴斯</a><i>(37440)</i></li>

            <li><a href="#">明基</a><i>(30453)</i></li>

            <li><a href="#">爱国者</a><i>(304760)</i></li>

            <li><a href="#">其他品牌相机</a><i>(32440)</i></li>

        </ul>

        <div class="showmore">

            <a href="#"><span>显示全部品牌</span></a>

        </div>

    </div>

    <script type="text/javascript" src="js/index1.js"></script>

</body>

</html>
.SubCategoryBox{

        width: 600px;

        height: 300px;

        border: 1px solid;

        float: left;

        margin-left: 300px;

        margin-top: 100px;

}

.SubCategoryBox ul li{

    display: inline-block;

    float: left;

    width: 160px;

    height: 20px;

    margin-right: 10px;

    text-align: center;

}

.SubCategoryBox ul li a{

    text-decoration: none;

    color: black;

}

.showmore{

    clear: both;

    display: block;

    float: left;

    margin-left: 260px;

    margin-top: 30px;

}

.showmore a{

    border: 1px solid #464646;

    text-decoration: none;

}

.promoted{

    color: red;

}
//第一种方法

$(function(){

    var $category = $('ul li:gt(5):not(:last)');

    $category.hide();

    var $toggleBtn = $('div .showmore > a');

    $toggleBtn.click(function(){

        if($category.is(":visible")){

            $category.hide();

            $(this).find('span').text("显示全部品牌");

            $('ul li').removeClass("promoted");

        }else{

            $category.show();

            $(this).find('span').text("精简显示品牌");

            $('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')").addClass("promoted");

        }

        return false

    })

})

//第二种方法，使用jQuery自身存在的方法，能够给一个按钮添加一组交互事件，存在错误

var $category = $('ul li:gt(5):not(:last)');

$category.hide();

var $toggleBtn = $('div .showmore > a');

$toggleBtn.toggle(function(){

    $category.hide();

    $(this).find('span').text("显示全部品牌");

    $('ul li').removeClass("promoted");

},function(){

     $category.show();

    $(this).find('span').text("精简显示品牌");

    $('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')").addClass("promoted");

})

jQuery-品牌列表案例的更多相关文章

  1. jquery mobile小案例

    ---恢复内容开始--- [jquery mobile小案例]效果图如下: 首先先创建一个页面主要使用data-role="page"这个指令,我们给它起个id="pag ...

  2. jQuery Mobile 列表内容

    jQuery Mobile 列表缩略图 对于大于 16x16px 的图像,请在链接中添加 <img> 元素. jQuery Mobile 将自动把图像调整至 80x80px: 实例: &l ...

  3. jQuery Mobile 列表视图(带有自动检索)

    输入a: 输入b: jQuery Mobile 列表视图 jQuery Mobile 中的列表视图是标准的 HTML 列表:有序列表 (<ol>) 和无序列表 (<ul>). ...

  4. Web 开发人员不能错过的 jQuery 教程和案例

    jQuery 把惊喜延续到设计领域,处处带来极大的灵活性,创造了许多体验良好的设计,而且拥有不错的性能.这里分享一组 Web 开发人员不能错过的 jQuery 教程和案例,帮助你更好的掌握 jQuer ...

  5. jQuery操作列表数据转成Json再输出为html dom树

    jQuery 把列表数据转成Json再输出为如下 dom树 <div id="menu" class="lv1"> <ul class=&qu ...

  6. ecshop首页调用指定商品分类下的商品品牌列表

    转之--http://www.16css.com/ecshop/735.html 通过二次开发可以实现ECSHOP首页调用指定分类下的品牌列表. 第一步: 打开根目录下的index.php 在最后面 ...

  7. （五）Jquery Mobile列表

    Jquery Mobile列表 一.JM列表 1.普通列表            效果:            带序号的列表 将ul换成ol      效果:       2.data-inset=& ...

  8. 基于bootstrap的jQuery多级列表树插件 treeview

    http://www.cnblogs.com/mfc-itblog/p/5233453.html http://www.htmleaf.com/jQuery/Menu-Navigation/20150 ...

  9. 基于bootstrap的jQuery多级列表树插件

    简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一 ...

随机推荐

  1. 【QT】自己生成ui加入工程

    在三个月前 我就在纠结 C++ GUI Qt 4编程这本书中2.3节 快速设计对话框这一段. 按照书上的做没有办法生成能够成功运行的程序. 这两天又折腾了好久,终于成功了. 注意事项: 1. 我之前装 ...

  2. HDU 4946 Area of Mushroom (几何凸包)

    题目链接 题意:给定n个人,每个人有一个速度v方向任意.如果平面中存在一个点只有某个人到达的时间最短(即没有人比这个人到的时间更短或相同),那么我们定义这个店归这个人管辖,现在问这些人中哪些人的管辖范 ...

  3. 常用邮箱的服务器(SMTP/POP3)地址和端口总结

    163.com: POP3服务器地址:pop.163.com(端口:110) SMTP服务器地址:smtp.163.com(端口:25) 126邮箱: POP3服务器地址:pop.126.com(端口 ...

  4. ！gluLookAt与glOrtho 参数解析

    void gluLookAt( GLdouble eyeX, GLdouble eyeY, GLdouble eyeZ, GLdouble centerX, GLdouble centerY, GLd ...

  5. Android 实现类似微信客户端朋友圈更新提示的小红点&栏目订阅

    用到的类: com.jauker.widget.BadgeView 实现代码: BadgeView imageBadge = new BadgeView(getContext()); imageBad ...

  6. nc　显示服务器开放的端口

    # nc -z -w xxxx.com - Connection to xxxx.com port [tcp/ftp] succeeded! Connection to xxxx.com port [ ...

  7. @ifconfig eth0|awk -F "[ :]+" 'NR==2{print $4 "/" $NF}'中"[ :]+" 是什么意思？@

    http://blog.csdn.net/zhuying_linux/article/details/6822987

  8. SpringMVC @RequestBody问题：Unrecognized field , not marked as ignorable

    http://blog.csdn.net/isea533/article/details/33397735

  9. ASP.NET Web Api 服务器端变了，客户端该如何修改请求（转载）

    转载地址:http://www.cnblogs.com/fzrain/p/3558765.html 前言 一旦我们将API发布之后,消费者就会开始使用并和其他的一些数据混在一起.然而,当新的需求出现时 ...

  10. 无废话ExtJs 入门教程九[数字字段：NumberField、隐藏字段Hidden、日期字段：DataFiedl]

    无废话ExtJs 入门教程九[数字字段:NumberField.隐藏字段Hidden.日期字段:DataFiedl] extjs技术交流,欢迎加群(201926085) 继上第六节内容,我们在表单里加 ...