<!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】Reverse Linked List（easy）

    Reverse a singly linked list. 思路:没啥好说的.秒... ListNode* reverseList(ListNode* head) { ListNode * rList ...

  2. 导出 SQL SERVER 表中数据为脚本

    ALTER PROCEDURE [dbo].[Usp_OutputData] @tablename sysname, @outputIdentitycolumn int AS declare @col ...

  3. CountdownLatchTest

    import java.util.concurrent.CountDownLatch; import java.util.concurrent.ExecutorService; import java ...

  4. vector reserve与resize区别

    vector 的reserve增加了vector的capacity,但是它的size没有改变!而resize改变了vector的capacity同时也增加了它的size!原因如下:reserve是容器 ...

  5. Mysql获取时间

    select now() 当前时间;   SELECT curdate() 当天日期; select date_sub(curdate(),interval 1 day) 前一天日期; select ...

  6. mysql 关于列的语句

    查看列:desc 表名; 修改表名:alter table t_book rename to bbb; 添加列:alter table 表名 add column 列名 varchar(30); 删除 ...

  7. Jquery.Datatables td宽度太长的情况下，自动换行

    在 td 里面 加上 style="word-wrap:break-word;" 自动换行就好了,如果不想换行,可以将超出内容设为隐藏, overflow:hidden; whit ...

  8. 与你相遇好幸运，Sail.js新建模型控制器

    sails generate api user  创建了user的controller和models sails generate api user index 创建了user的controller和 ...

  9. 最稳定 性能最好 的 Linux 版本?

    Ubuntu太他妈不稳定了,简直是一坨屎 CentOS.Ubuntu.Debian三个linux比较异同http://blog.csdn.net/educast/article/details/383 ...

  10. 在ubuntu上搭建开发环境4---ubuntu简单的搭建LAMP环境和配置

    最近重新安装了Ubuntu,但是之前的LAMP环境自然也就没有了,实在是不想再去编译搭建LAMP环境(这种方法实在是太费时间,而且太容易遇到各种不知道为什么的错误),所以,就去查查有没有什么简单的搭建 ...