直接上代码:(复制即可用),有问题私信我
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
p {
margin: 0;
padding: 0;
}
h3 h4 h5 {
margin: 0;
padding: 0;
}
body {
font-family: Tahoma, Arial, Helvetica, "宋体 ";
font-size: 14px;
width: 100%;
background: #FFF;
color: #747474;
}
html {
overflow-y: scroll;
}
ul,
ol {
list-style-type: none;
margin: 0;
}
//以上为页面初始化
.midContentsLeft {
position: relative;
padding-right: 5px;
width: 305px;
box-sizing: border-box;
overflow: hidden;
z-index: 10;
height: 100%;
height: 800px;
overflow: hidden;
overflow-y: scroll;
margin: 0 auto;
}
.midContentsLeft::-webkit-scrollbar {
width: 0px;
}
.midContentsLeft::-webkit-scrollbar-track {
background: #E5E8ED;
border-radius: 2px;
}
.midContentsLeft::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 10px;
}
.midContentsLeft::-webkit-scrollbar-thumb:hover {
background: transparent;
}
.midContentsLeft::-webkit-scrollbar-corner {
background: transparent;
}
.artTitle {
font-size: 16px;
color: #000;
line-height: 22px;
display: inline-block;
vertical-align: top;
font-weight: 400;
max-width: 80%;
height: 44px;
display: none;
}
.left_navLips {
padding: 0 12px 0 0;
position: relative;
/*padding: 10px 0;*/
cursor: pointer;
margin-bottom: 20px;
}
.left_navLips div {
padding: 0 12px 0 0;
position: relative;
}
.left_navLips div h4 {
font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #181818;
transition: .3s ease;
}
.left_navLips div h4:hover {
color: #3999E6;
}
.left_navLips ul li {
font-size: 14px;
color: #181818;
display: block;
padding-right: 18px;
word-wrap: break-word;
font-weight: 400;
margin-bottom: 12px;
padding-left: 20px;
cursor: pointer;
position: relative;
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
}
.left_navLips ul li:hover {
color: #3999E6;
}
.left_navLips div i {
position: absolute;
right: 0;
top: 0;
transform: rotate(0deg);
transition: all .4s ease;
/* display: none; */
color: #838383;
font-style: normal;
}
.turned {
transform: rotate(-180deg) !important;
}
.icons::before {
content: "";
position: absolute;
left: 0px;
top: 0;
width: 2px;
background-color: #00a4ff !important;
bottom: 0;
z-index: 40;
}
.left_navLips ul {
margin: 20px 0;
position: relative;
height: auto;
overflow: hidden;
transition: .3s ease-in-out;
}
.left_navLips ul::before {
content: '';
position: absolute;
top: 0;
width: 2px;
height: 100%;
background-color: #E5E8ED;
}
.showed {
height: 0 !important;
margin: 0 !important;
}
</style>
</head>
<body>
<div class="midContentsLeft">
<div class="artTitle">技术支持</div>
<div class="left_navLips">
<div>
<h4>口红推荐</h4><i>∨</i>
</div>
<ul>
<li>TF16</li>
<li>阿玛尼405</li>
<li>小金条21</li>
<li>迪奥999</li>
</ul>
</div>
<div class="left_navLips">
<div>
<h4>口红色号</h4><i>∨</i>
</div>
<ul>
<li>正红色</li>
<li>西柚色</li>
<li>烂番茄色</li>
<li>斩男色</li>
</ul>
</div>
<div class="left_navLips">
<div>
<h4>斩男香水</h4><i>∨</i>
</div>
<ul>
<li>YSL反转巴黎</li>
<li>Gucci Bloom</li>
<li>DIPTYQUE无花果</li>
<li>TOM FORD韵度烟草</li>
</ul>
</div>
<div class="left_navLips">
<div>
<h4>斩女香水</h4><i>∨</i>
</div>
<ul>
<li>Bvlgari大吉岭茶</li>
<li>Creed银色山泉</li>
<li>纪梵希绅士品格</li>
<li>TOM FORD灰色香根草</li>
<li>CLEAN暖棉雨后</li>
</ul>
</div>
</div>
<script src="jquery.js"></script>//此处引用的JQ为自己本地的JQ地址
<script>
$('.left_navLips div h4').eq(0).css('color','#3999E6')
$(document).on('click','.left_navLips div h4',function(){
$(this).parent().siblings().toggleClass('showed')
$(this).siblings().toggleClass('turned')
$('.left_navLips div h4').css('color','#181818')
$(this).css('color','#3999E6')
})
$('.left_navLips ul li').eq(0).addClass('icons')
$('.left_navLips ul li').eq(0).css('color','#3999E6')
$(document).on('click','.left_navLips ul li',function(){
$('.left_navLips ul li').removeClass('icons')
$(this).addClass('icons').siblings().removeClass('icons')
$('.left_navLips ul li').css('color','#181818')
$(this).css('color','#3999E6')
$('.left_navLips div h4').css('color','#181818')
$(this).parent().siblings().find('h4').css('color','#3999E6')
console.log($(this).parent().siblings().html())
})
</script>
</body>
</html>
主要知识点:
1.排他思想
2.ul、li伪元素实现蓝块移动效果
3.transition添加过度渐出动画效果
4.添加类名实现展开收起,通过toggleClass() 切换是否添加类名