移动端下拉筛选
时间:2022-07-23
本文章向大家介绍移动端下拉筛选,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
示例
image
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.hide {
display: none;
}
.filter-bar {
display: flex;
font-size: #333;
}
.filter-item {
position: relative;
flex: 1;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ddd;
text-align: center;
}
.filter-item::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 30px;
margin: auto;
width: 4px;
height: 4px;
border-left: 1px solid #333;
border-bottom: 1px solid #333;
transform: rotate(-45deg);
transition: transform .5s ease;
}
.filter-item.active::after {
transform: rotate(135deg);
}
.filter-item:not(:last-child) {
border-right: 1px solid #ddd;
}
.filter-content .content-item {
height: 0;
transition: height .3s ease;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.filter-content .content-item.active {
height: 155px;
overflow: hidden;
}
.filter-content .content-list {
margin: 0;
padding: 10px;
height: 50px;
box-sizing: border-box;
border-bottom: 1px solid #ddd;
background: #fff;
}
.filter-content .content-list:last-child {
border: 0;
}
</style>
</head>
<body>
<div class="the-filter">
<div class="filter-bar">
<div class="filter-item" data-id="1">测试1</div>
<div class="filter-item" data-id="2">测试2</div>
<div class="filter-item" data-id="3">测试3</div>
</div>
<div class="filter-content">
<div class="content-item">
<div class="content-inner content-inner-1 hide">
<p class="content-list">test1</p>
<p class="content-list">test2</p>
<p class="content-list">test3</p>
</div>
<div class="content-inner content-inner-2 hide">
<p class="content-list">测试1</p>
<p class="content-list">测试2</p>
<p class="content-list">测试3</p>
</div>
<div class="content-inner content-inner-3 hide">
<p class="content-list">选项1</p>
<p class="content-list">选项2</p>
<p class="content-list">选项3</p>
</div>
</div>
</div>
</div>
<script>
const filterBar = document.querySelector('.filter-bar')
const contentItem = document.querySelector('.content-item')
filterBar.onclick = function (e) {
console.log(e.target)
clearContentActive()
contentItem.classList.remove('active')
if (e.target.classList.contains('active')) {
e.target.classList.remove('active')
} else {
clearFilterActive()
e.target.classList.add('active')
contentItem.classList.add('active')
const currentContent = document.querySelector(`.content-inner-${e.target.dataset.id}`)
currentContent.classList.remove('hide')
}
}
const filterItems = document.querySelectorAll('.filter-item')
function clearFilterActive () {
filterItems.forEach(v => {
if (v.classList.contains('active')) {
v.classList.remove('active')
}
})
}
const contentInner = document.querySelectorAll('.content-inner')
function clearContentActive () {
contentInner.forEach(v => {
if (!v.classList.contains('hide')) {
v.classList.add('hide')
}
})
}
</script>
</body>
</html>
- spark2的SparkSession思考与总结2:SparkSession有哪些函数及作用是什么
- GO语言并发编程之互斥锁、读写锁详解
- spark2.2 SparkSession思考与总结1
- 【译】Spring 官方教程:Spring Security 架构
- hdu----(4301)Divide Chocolate(状态打表)
- hdu------(4300)Clairewd’s message(kmp)
- TensorFlow ML cookbook 第一章7、8节 实现激活功能和使用数据源
- Go语言struct类型详解
- spark1.x升级spark2如何升级及需要考虑的问题
- 使用 kubeadm 创建一个 kubernetes 集群
- Oracle 12c 多租户专题|CDB元数据内幕
- 深入分析golang多值返回以及闭包的实现
- Hadoop3.0扩展Yarn资源模型详解2:资源Profiles说明
- hdu------(1525)Euclid's Game(博弈决策树)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android网络收集和ping封装库
- Kubernetes之helm部署使用
- 想掌握 Binder 机制?驱动核心源码详解和Binder超系统学习资源,想学不会都难!
- leetcode链表之回文链表
- Docsify 安装
- Docsify 初始化文件夹
- ELK 日志系统集成 Skywalking 调用链 ID
- ChartCenter ——为您的K8s之旅保驾护航v
- leetcode链表之删除链表的节点
- iOS打包的那一些事情
- 腾讯云服务器(CentOS 7、Tencent Linux)手动搭建LNMP环境(linux+Nginx+Mariadb+PHP)
- iOS技术面试题及答案
- 虽然现在有可以去码的软件了,可视频是如何自动跟踪打码的?
- 2020-09-12:手撕代码:最小公倍数,复杂度多少?
- Mac App推荐