木灵鱼儿
阅读:1507
品牌列表效果
普通切换效果
html代码:
<div class="box">
<ul>
<li><a href="#">佳能<i>(30440)</i></a></li>
<li><a href="#">索尼<i>(30440)</i></a></li>
<li><a href="#">三星<i>(30440)</i></a></li>
<li><a href="#">尼康<i>(30440)</i></a></li>
<li><a href="#">松下<i>(30440)</i></a></li>
<li><a href="#">卡西欧<i>(30440)</i></a></li>
<li><a href="#">富士<i>(30440)</i></a></li>
<li><a href="#">柯达<i>(30440)</i></a></li>
<li><a href="#">宾得<i>(30440)</i></a></li>
<li><a href="#">理光<i>(30440)</i></a></li>
<li><a href="#">奥林巴斯<i>(30440)</i></a></li>
<li><a href="#">明基<i>(30440)</i></a></li>
<li><a href="#">爱国者<i>(30440)</i></a></li>
<li><a href="#">佳能<i>(30440)</i></a></li>
<li><a href="#">佳能<i>(30440)</i></a></li>
<li><a href="#">佳能<i>(30440)</i></a></li>
<li><a href="#">佳能<i>(30440)</i></a></li>
<li><a href="#">佳能<i>(30440)</i></a></li>
<li><a href="#">佳能<i>(30440)</i></a></li>
<li><a href="#">佳能<i>(30440)</i></a></li>
<li><a href="#">佳能<i>(30440)</i></a></li>
<li><a href="#">其他品牌<i>(30440)</i></a></li>
</ul>
<div class="showmore">
<a href="https://www.baidu.com"><span>显示全部品牌</span></a>
</div>
</div>
css代码:
html,body {
padding: 0;
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
a {
text-decoration: none;
color: inherit;
}
.box {
width: 500px;
border: 1px solid #000;
transition: all .5s;
}
.box ul li {
display: inline-block;
width: 30%;
line-height: 30px;
color: #666;
}
.showmore {
padding: 10px;
text-align: center
}
.showmore span {
display: inline-block;
padding: 5px 15px;
background-color: #1eafe9;
color: #fff;
border-radius: 4px;
transition: background-color .3s;
}
.promoted {
color: aqua !important;
font-weight: bold;
}
jQuery代码:
var $category = $('ul li:gt(5):not(:last)');
$category.hide();
$('div.showmore > a').click(function(){
if($category.is(':visible')){
$category.hide();
$('.box ul li').removeClass('promoted');
$(this).find('span').css('background-color','#1eafe9');
$('.showmore span').text('显示完整列表');
}else {
$category.show();
$('.box ul li').filter(':contains("索尼"),:contains("宾得"),:contains("明基")')
.addClass('promoted');
$(this).find('span').css('background-color','#237191');
$('.showmore span').text('显示精简列表');
};
return false;
});
效果图:
通过该代码,可以对这个li元素区间性显示隐藏,并且显示全部li元素后,可以针对性的筛选含有对应文字的元素添加class,也就是filter()方法。
这里详细说一下一些方法
is()
该方法通过判断你填入的选择器来返回布尔值,比如我在这里使用了is(‘:visible’)判断这个元素集合里是否都是显示。
find()
find()方法用于获取所有父元素下的对应的元素,注意,他获取的不单单是子元素,子元素下子元素只要是一样的都会获取到,以此类推。
filter()
filter()方法可以批量筛选该元素,拿上面的代码来说,筛选的是li元素集合,然后可以多个判断的值,用逗号隔开,使用选择器筛选,我们使用了contains()来判断这个li里面是否含有对应的文本内容,如果有就将对应的这个li元素保存到jq的数组对象里面,然后返回,再添加class。
注意:
filter筛选的是该元素,而find筛选的是该元素里面的元素,作用的点不同。所以,$(‘ul li’).filter(‘a’)这种写法来获取里面的a元素是不对的。
事实上我们使用了if语句来判断到底是显示还是隐藏,但是从代码上来说,还有更简单的方法。
toggle()方法
该方法可以让元素在显示和隐藏之间进行切换,并且还有动效
$('div.showmore > a').click(function(){
$category.toggle();
return false;
});
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
Promise失败重试,可指定重试次数
//模拟异步请求 function axiosFn() { return new Promise((resolve, reject) => { const flge = Math.random(); //随机值 setTimeout(() => { //大于0.7就是成功 if (flge > 0.7) { return resolve(flge); } else { return reject(...
animation 动画的三个事件
const div = document.querySelector("div.box"); div.addEventListener("animationstart", function() { //动画开始运行触发 }); div.addEventListener("animationiteration", function() { //动画每执行一次触发一次,适用用多次动画 }); div.addEventListener("animationend", function() { //...
手写Promise
/* * @Author: mulingyuer * @Date: 2021-12-30 22:06:58 * @LastEditTime: 2022-01-03 05:22:30 * @LastEditors: mulingyuer * @Description: 手写promise * @FilePath: \undefinedc:\Users\13219\Desktop\promise.js * 怎么可能会有bug!!! */ /** * @description: 自定义promise * @param {fucntion} executor 执行器函数(同...
深度合并对象的方法
找了很久,现有的库有两个:1. Mergenpm地址: Merge用法:import merge from 'merge'; const obj1 = { name: 2}; const obj2 = { value: 1 }; //合并 merge(obj1,obj2); console.log(obj1); //{name:2,value:1} //克隆合并-与目标对象无关联 const obj3 = merge(true,obj1,obj2); console.log(obj3); //{name:2,value:1} console.log(obj3 === obj1)...
利用JSON过滤对象和数组中指定的key属性
有时候我们在vue中进行for循环,就会涉及到绑定唯一值key的问题,但是并不是任何时候都会存在所谓的唯一值,使用index下标明显是不合适的,官方也不推荐,除非你for循环出来的列表不用变化。所以一般常用的做法就是给for循环的对象添加一个属性,属性的值是随机的uuid或者时间戳。这样前端问题解决了,如果遍历的数据还需要提交到后端,那么不就多了一个属性,这个属性后端不需要的。所以,我们需要在提交数据前,对数据进行过滤。过滤又得for循环删除?那怎么行,有没有那种通用的,简单的方法。过滤方法/** * @description: 过滤对象中指定的属性,也可以拿来浅拷贝 * @para...
Copy 一个复制操作的类
前言js有一个31k多的star的开源复制库:clipboard.js;但是一些简单复制并不想安装一个库来解决,所以就想自己写一个。copy所需要的东西Selection 对象用于获取被用户选中的部分,通过toString()方法可以获取被选中的文本内容,以及js操作选中。MDN文档:SelectionexecCommand 对象用于以命令的形式来操作网页的内容,说白了就是用它来实现复制文本操作,复制的是选中的文本MDN文档:execCommand 需要注意的是,execCommand在未来将会被遗弃,因为这个api本身是从ie浏览器那边继承的,久而久之各大浏览器都对其做了兼容,虽然...
对象扁平化
前言后端返回给前端的数据,有时候会是一个多层级对象,但是我们前端使用的时候,for循环遍历渲染时,多层级对象往往需要进行单独处理,因为还需要判断这个key值是否存在,否则会报错。强行让后端改变数据结构又好像不现实,无奈,只有自己处理了。掘金看到一位大佬文章《【算法】JS 实现对象的扁平化》感觉很合适,逻辑清晰。要求将对象中的层级扁平化,改成如下格式:// 实现一个 flatten 函数,实现如下的转换功能 const obj = { a: 1, b: [1, 2, { c: true }], c: { e: 2, f: 3 }, g: null, }; // 转换为 l...
javascript 生成随机密码,指定位数,难度(大小写、数字、特殊字符)
原理也没啥好藏着掖着的,就是为了保证密码难度,开头的字符一定是满足安全需要的,比如要求大小写数字加特殊字符,那么开头四位就一定是:大写一位、小写一位、数字一位、特殊字符一位;然后剩下的随机。/** * @description: 随机密码 * @param {*} len 密码位数 * @param {*} mode 密码难度:hide(大小写数字特殊字符)、medium(大小写数字)、low(小写数字) * @Date: 2021-07-02 15:52:32 * @Author: mulingyuer */ export const randomPass = functi...