移动端 范围筛选html,移动端下拉筛选

Document

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;

}

测试1
测试2
测试3

test1

test2

test3

测试1

测试2

测试3

选项1

选项2

选项3

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')

}

})

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值