品牌的显示更多和精简-白红宇

品牌的显示更多和精简

阅读量：5015 次

发布时间：2019-06-12

本文共 2587 字，大约阅读时间需要 8 分钟。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

*{ 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(img/down.gif) no-repeat 0 0;}

.promoted a { color:#F50;}

</style>

$(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(img/down.gif) no-repeat 0 0")

.text("显示全部品牌"); //改变背景图片和文本

$('ul li').removeClass("promoted"); // 去掉高亮样式

}else{

$category.show(); // 显示$category

$('.showmore a span')

.css("background","url(img/up.gif) no-repeat 0 0")

.text("精简显示品牌"); //改变背景图片和文本

$('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")

.addClass("promoted"); //添加高亮样式

}

return false; //超链接不跳转

})

</script>

</head>

<body>

<ul>

<li ><a href="#">其它品牌相机</a><i>(7275) </i></li>

</ul>

<a href="more.html"><span>显示全部品牌</span></a>

</div>

</body>

</html>

转载于:https://www.cnblogs.com/ll-taj/p/6266014.html

你可能感兴趣的文章

小花梨的取石子游戏（思维）

查看>>

Ubuntu 18.04安装arm-linux-gcc交叉编译器

查看>>

.net core i上 K8S(一)集群搭建

查看>>

django drf 深入ModelSerializer

剑指offer编程题Java实现——面试题4后的相关题目

太可怕了！黑客是如何攻击劫持安卓用户的DNS？

Timer和TimerTask的使用--2

查看>>

UWP 在 WebView 中执行 JavaScript 代码（用于模拟用户输入等）

查看>>

FileUpload1.PostedFile.FileName 获取的文件名

查看>>

Mock InjectMocks ( @Mock 和 @InjectMocks )区别