<!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. php原型模式的研究

    <?php class Sea{} class EarthSea extends Sea{} class MarsSea extends Sea{} class Plains{} class E ...

  2. increadbuild重装

    客户端和服务端都重装,可能需要去任务管理其中停止相关的服务,重装之前要去注册表中删除旧的注册表项.一般情况下incredibuild对应的位置是:64位系统HKEY_CLASSES_ROOT\\Wow ...

  3. weblogic重置用户名密码。

    说明:%DOMAIN_HOME%:指WebLogic Server 域(Domain)目录 例如我的做测试的域的根目DOMAIN_HOME=D:\bea\user_projects\domains\b ...

  4. 对于大一学习计算机的新手（c/c++ ）提出一些学习经验

    对于刚刚上大一的新手,且是那种十分有上进的学生,在学习计算机的过程中必然会有一大堆的困惑,比如: 1 .如何学好编程(这与以往的应试教育完全不同,按照以往的那种学习方式,看书刷题不过是成为一个考试学霸 ...

  5. Genesis不能运行Perl编译后的脚本

    我们经常会遇到Genesis2000中C-shell的脚本不能正常运行的问题,而同样的程序在其它电脑上又可以正常运行,如果你能看看Genesis后台窗口,也就是后面那个黑乎乎的窗口(所谓的小DOS窗口 ...

  6. 将前台json对象传入java后台

    前台json格式的数据如何传入后台 1. 将要传入后台的数据组装成JSON格式的字符串: var jsonStr = [{'name':'jim' , 'age':20} , {'name':'kin ...

  7. 【JAVA之泛型】

    一.引例. 1.引例. 假设现在有一个ArrayList的容器,如果不使用泛型约束,则可以向容器中加入各种类型的对象,但是如果取出来的时候只是用一种类型的转换则肯定会抛出ClassCastExcept ...

  8. java创建线程的几种方式

    1.继承Thread类 /** * @author Ash * @date: 2016年8月6日 下午10:56:45 * @func: 通过继承Thread类来实现多线程 * @email 4086 ...

  9. 攻城狮在路上（壹） Hibernate（三）--- 属性访问、命名策略、派生属性、指定包名等

    一.hibernate访问持久化类属性的策略: 在<property>元素中的access属性用于指定Hibernate访问持久化类属性的方式. 常见的方式如下: 1.property:默 ...

  10. js this的使用举例

    js this的使用举例 <script type="text/javascript"> function test(obj){ obj.style.width= ob ...