移动端 范围筛选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')

}

})

}