jQuery仿淘宝网产品品牌隐藏与显示效果


Posted in Javascript onSeptember 01, 2015

本文实例讲述了jQuery仿淘宝网产品品牌隐藏与显示效果。分享给大家供大家参考。具体如下:

这里演示jQuery实现产品品牌隐藏与显示效果,仿淘宝网商品列表的品牌显示与折叠功能,很实用的代码,看了就知道了。

运行效果截图如下:

jQuery仿淘宝网产品品牌隐藏与显示效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery产品品牌隐藏与显示,仿淘宝网</title>
<style type="text/css">
*{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.showmore a span { padding-left:15px; background:url(images/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
</style>
<!-- 引入jQuery -->
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){ // 等待DOM加载完毕.
 var $category = $('ul li:gt(5):not(:last)'); // 获得索引值大于5的品牌集合对象(除最后一条) 
 $category.hide(); // 隐藏上面获取到的jQuery对象。
 var $toggleBtn = $('div.showmore > a'); // 获取“显示全部品牌”按钮
 $toggleBtn.click(function(){
  if($category.is(":visible")){
  $category.hide(); // 隐藏$category
  $('.showmore a span')
  .css("background","url(images/down.gif) no-repeat 0 0") 
   .text("显示全部品牌"); //改变背景图片和文本
   $('ul li').removeClass("promoted"); // 去掉高亮样式
  }else{
   $category.show(); // 显示$category
   $('.showmore a span')
   .css("background","url(images/up.gif) no-repeat 0 0") 
   .text("精简显示品牌"); //改变背景图片和文本
   $('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
  .addClass("promoted"); //添加高亮样式
  }
  return false; //超链接不跳转
 })
})
</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>(12289) </i></li>
<li ><a href="#">卡西欧</a><i>(8242) </i></li>
<li ><a href="#">富士</a><i>(14894) </i></li>
<li ><a href="#">柯达</a><i>(9520) </i></li>
<li ><a href="#">宾得</a><i>(2195) </i></li>
<li ><a href="#">理光</a><i>(4114) </i></li>
<li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li ><a href="#">明基</a><i>(1466) </i></li>
<li ><a href="#">爱国者</a><i>(3091) </i></li>
<li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href="#"><span>显示全部品牌</span></a>
</div>
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
js隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 Javascript
javascript 获取图片尺寸及放大图片
Sep 04 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 Javascript
Angularjs过滤器使用详解
May 25 Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
vue内置组件component--通过is属性动态渲染组件操作
Jul 28 Javascript
在实例中重学JavaScript事件循环
Dec 03 Javascript
JavaScript中this详解
Sep 01 #Javascript
JS实现的自定义右键菜单实例二则
Sep 01 #Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 #Javascript
jquery常用函数与方法汇总
Sep 01 #Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 #Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 #Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 #Javascript
You might like
短波问题解答
2021/02/28 无线电
php绘制一条直线的方法
2015/01/24 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
PHP实现图片压缩
2020/09/09 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python脚本实现格式化css文件
2015/04/08 Python
Python之父谈Python的未来形式
2016/07/01 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
岗位安全生产责任书
2014/07/28 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
导游词之西安骊山
2019/12/03 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL
angular4实现带搜索的下拉框
2022/03/25 Javascript