<!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. 【leetcode】Spiral Matrix II （middle）

    Given an integer n, generate a square matrix filled with elements from 1 to n2 in spiral order. For ...

  2. Spring控制反转与依赖注入(IOC、DI)

    IOC: 反转控制   Inverse Of Control DI:依赖注入 Dependency Injection 目的:完成程序的解耦合 解释:在应用系统的开发过程中,有spring负责对象的创 ...

  3. [Android Pro] Toolbar的完全自定义

    reference to : http://blog.csdn.net/elder_sword/article/details/46634751 Toolbar是什么,不知道的可以去大神的博客瞻仰下 ...

  4. 解决客户端访问https报错

    现象: javax.net.ssl.SSLHandshakeException: Received fatal alert: handshake_failure at com.sun.net.ssl. ...

  5. springmvc上传List，

    @RequestMapping("pay") public ModelAndView pay(String orderNo, TransactionDTO transaction, ...

  6. Android 毛玻璃效果

    muzei live wallpaper https://github.com/romannurik/muzei

  7. java的system.arraycopy（）方法

    java.lang.System的静态方法arraycopy()可以实现数组的复制,讲课的老师说这个方法效率比较高,如果数组有成千上万个元素,那么用这个方法,比用for语句循环快不少.于是我试了试,发 ...

  8. AngularJS 服务(Service)

    AngularJS 中你可以创建自己的服务,或使用内建服务. 什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用. AngularJS 内建了30 ...

  9. **PHP中替换换行符

    PHP中替换换行符 php 不同系统的换行不同系统之间换行的实现是不一样的linux 与unix中用 \nMAC 用 \rwindow 为了体现与linux不同 则是 \r\n所以在不同平台上 实现方 ...

  10. HTTP中302与301的区别以及在ASP.NET中如何实现

    一．官方说法301,302 都是HTTP状态的编码,都代表着某个URL发生了转移,不同之处在于: 301 redirect: 301 代表永久性转移(Permanently Moved).302 re ...