随笔 - 315  文章 - 1  评论 - 12  阅读 - 24万

jQuery 选择器demo练习

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>品牌列表案例</title>
<script src="js/jquery-2.1.1.min.js" rel="script"></script>
<style>
ul li{
list-style: none;
}
*{
text-decoration: none;
}
span{
background: #1a272f;
color: #fff;
border:1px solid #647787;
width: 150px;
padding: 5px;
text-align: center;
vertical-align: middle;
border-radius: 5px;
margin: 0 50px;
}
.highlighted{
color: #f00;
text-decoration: underline;
}
</style>
<script>
$(document).ready(function () {
//从列表的索引值大于5开始,但是不包含最后一条记录的所有列表元素隐藏
var $eategory=$('ul li:gt(5):not(:last)');
//$eategory.hide();//隐藏上面获取到的jQuery对象
//当用户点击“显示全部品牌”按钮时,所有列表都显示,且文本变为“精简显示品牌”,同时推荐品牌高亮显示
// 首先获取按钮,
var $toggleBtn =$('div.showMore > a');
//给按钮添加点击事件,且列表全部显示,但是超链接不跳转


//法一:最中规中矩的做法,但是很麻烦也很呆板,没有交互
/*$toggleBtn.click(function(){
$eategory.show();//显示全部列表
//按钮文本改为精简品牌展示
$('.showMore a span').text("精简显示品牌");
//品牌推荐高亮显示
$('ul li').filter(":contains('demo2'),:contains('demo5'),:contains('demo9')").addClass("highlighted");
return false;//链接不跳转
});*/



//法二:相对法一较为灵活,思路清晰易理解,且用户体验更佳。
$toggleBtn.click(function(){
if($eategory.is(":hidden")){ //如果元素隐藏
$eategory.show();//显示全部列表
$('.showMore a span').text("精简显示品牌");
//filter:筛选
$('ul li').filter(":contains('demo2'),:contains('demo5'),:contains('demo9')").addClass("highlighted");
}else{
$eategory.hide();
$('ul li').removeClass("highlighted");
$('.showMore a span').text("显示全部品牌");
}
return false;//链接不跳转
});


})

</script>
</head>
<body>
<div class=”SubCategoryBox”>
<ul>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">demo1</a><i>(30440)</i></li>
<li><a href="#">demo2</a><i>(30440)</i></li>
<li><a href="#">demo3</a><i>(30440)</i></li>
<li><a href="#">demo4</a><i>(30440)</i></li>
<li><a href="#">demo5</a><i>(30440)</i></li>
<li><a href="#">demo6</a><i>(30440)</i></li>
<li><a href="#">demo7</a><i>(30440)</i></li>
<li><a href="#">demo8</a><i>(30440)</i></li>
<li><a href="#">demo9</a><i>(30440)</i></li>
<li><a href="#">demo10</a><i>(30440)</i></li>
<li><a href="#">其他品牌</a><i>(7275)</i></li>
</ul>
<div class="showMore">
<a href="more.html"><span >显示全部品牌</span></a>
</div>
</div>
</body>
</html>
posted on   小虾米吖~  阅读(287)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」

点击右上角即可分享
微信分享提示