<!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. myeclipse破解

    由于内容比较多,我就直接转载了 ,同时感谢原博主 http://blog.itpub.net/27042095/viewspace-1164998/

  2. HTML标签汇总

    标签 描述 DTD(Document Type Definition) <!-- --> 定义html注释 STF <a> 定义链接或者锚点 STF <abbr> ...

  3. java动态生成excel打包下载

    @SuppressWarnings("unchecked") public String batchExport() throws DBException{ @SuppressWa ...

  4. eclipse使用时jar不在libraries

    jar是在项目工程的目录下 点击工程右键 这样jar包边收到librarles中

  5. vim 查找时忽略大小写

    :set ic 忽略大小写#ignorecase :set noic 不忽略大小写#noignorecase

  6. jQuery ajax同步的替换方法，使用 $.Deferred()对象

    function aa() { var defer = $.Deferred(); $.ajax({ url: "/Handler1.ashx", type: "post ...

  7. 回溯法解决N皇后问题（以四皇后为例）

    以4皇后为例,其他的N皇后问题以此类推.所谓4皇后问题就是求解如何在4×4的棋盘上无冲突的摆放4个皇后棋子.在国际象棋中,皇后的移动方式为横竖交叉的,因此在任意一个皇后所在位置的水平.竖直.以及45度 ...

  8. 【JAVA网络流之浏览器与服务器模拟】

    一.模拟服务器获取浏览器请求http信息 代码: package p06.TCPTransferImitateServer.p01.ImitateServer; import java.io.IOEx ...

  9. java compiler level does not match the version of the installed java project

    修改:工程/.settings/”目录下找到名为 org.eclipse.wst.common.project.facet.core.xml

  10. C# Settings使用小结

    本篇博客将介绍C#中Settings的使用. 首先介绍一个桌面程序中的例子,当我们新安装一个软件,软件启动后会有例如新手指导等窗体弹出来,每次都需要自己去关闭它.当然这些软件都会提供例如不再显示等功能 ...