<!-- 容器属性:data-box="true" 容器内部默认为空html -->
<!-- 事件目标属性:data-target="true" 事件目标自动绑定事件相应方法 -->
<div class="layout-cell" data-box="true">
<ul class="layui-timeline">
<li class="layui-timeline-item item-color">
<i class="layui-icon layui-timeline-axis"></i>
<span class="layui-timeline-item-span">2020</span>
</li>
<li class="layui-timeline-item item-color">
<i class="layui-icon layui-timeline-axis"></i>
<span class="layui-timeline-item-span">2019</span>
</li>
<li class="layui-timeline-item item-color">
<i class="layui-icon layui-timeline-axis"></i>
<span class="layui-timeline-item-span">2018</span>
</li>
<!-- <li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<span class="layui-timeline-item-span">2016</span>
</li> -->
<li class="layui-timeline-item item-color">
<i class="layui-icon layui-timeline-axis"></i>
<span class="layui-timeline-item-span">2017</span>
</li>
<li class="layui-timeline-item item-color">
<i class="layui-icon layui-timeline-axis"></i>
<span class="layui-timeline-item-span">2016</span>
</li>
<li class="layui-timeline-item item-color">
<i class="layui-icon layui-timeline-axis"></i>
<span class="layui-timeline-item-span">2015</span>
</li>
<li class="layui-timeline-item item-color">
<i class="layui-icon layui-timeline-axis"></i>
<span class="layui-timeline-item-span">2014</span>
</li>
<li class="layui-timeline-item item-color">
<i class="layui-icon layui-timeline-axis"></i>
<span class="layui-timeline-item-span">2013</span>
</li>
<li class="layui-timeline-item item-color">
<i class="layui-icon layui-timeline-axis"></i>
<span class="layui-timeline-item-span">2012</span>
</li>
<li class="layui-timeline-item item-color">
<i class="layui-icon layui-timeline-axis"></i>
<span class="layui-timeline-item-span">2011</span>
</li>
</ul>
</div>
样式
.layout-cell {
box-sizing: border-box;
display: flex;
ul,
li {
/*做时间轴的线*/
margin: 0;
padding: 0;
}
// 整体距离左边的距离
.layui-timeline {
padding-left: 9px;
}
.bgcolor {
background-color: #4389F9;
}
.color {
color: #4389F9;
}
.layui-timeline-item {
position: relative;
padding-bottom: 39px;
}
// 年份距离右边距的距离
.layui-timeline-item-span {
font-family: '微软雅黑';
font-weight: Regular;
font-size: 14px;
cursor: pointer;
padding-left: 20px;
}
.layui-timeline-item:first-child::before {
display: block;
}
.layui-timeline-item:last-child::before {
content: '';
position: absolute;
left: 5px;
top: 0;
z-index: 0;
width: 0;
height: 100%;
}
.layui-timeline-item::before {
content: '';
position: absolute;
left: 5px;
top: 0;
z-index: 0;
width: 1px;
height: 100%;
}
// 将下划线变成竖直的线，并且定义背景颜色
.layui-timeline-item::before {
margin-left: -3.5px;
width: 2px;
}
.item-color::before {
background-color: rgba(197, 186, 186, 0.4);
}
.item-color2::before {
background-color: #4389F9;
}
// 将i变成圆球
.layui-timeline-axis {
position: absolute;
left: -5px;
top: 0;
z-index: 10;
width: 14px;
height: 14px;
line-height: 14px;
border: 1px solid rgba(197, 186, 186, 0.4);
background-color: white;
// border: 1px solid #fff;
color: #5FB878;
border-radius: 50%;
text-align: center;
cursor: pointer;
}
.layui-icon {
font-family: layui-icon !important;
font-size: 16px;
font-style: normal;
}
.layui-timeline-title {
position: relative;
// margin-bottom: 40px;
}
}
jQuery：
$(function () {
$('.layui-timeline-item').click(function () {
//让圆球变成蓝色
$(this).find('.layui-icon').attr('style', 'background:#4389F9');
//$(this).find('.layui-icon').nextAll().attr('style', 'background:#4389F9');
//除了自己之外，其他兄弟节点全部变成白色
//$(this).siblings().find('.layui-icon').attr('style', 'background:white');
//让自己（文字）的颜色变成蓝色
$(this).find('.layui-timeline-item-span').addClass('color');
//让其他子节点的文字变成原来的颜色
$(this).siblings().find('.layui-timeline-item-span').removeClass('color');
// $(this).siblings().nextAll().addClass('color');
//其下面的所有兄弟节点都变颜色
$(this).nextAll().find('.layui-icon').attr('style', 'background:#4389F9');
//其上面的所有兄弟节点都变颜色
$(this).addClass('item-color2');
$(this).prevAll().find('.layui-icon').attr('style', 'background:white');
$(this).nextAll().removeClass('item-color');
$(this).nextAll().addClass('item-color2');
$(this).prevAll().addClass('item-color');
$(this).prevAll().removeClass('item-color2');
//$(this).nextAll().attr('style', 'background:#4389F9');
//.layui-timeline-item::before
});
});
