示例
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>
