看到UI在做设计图 有级联选择器 就先写写 (项目还在用jquery~~~~~~)
先上效果图
css
.box{
position: relative;
width: 800px;
height: 800px;
background: #2A363E;
}
.input{
font-size: 20px;
color: #fff;
}
.input>input{
width: 500px;
height: 50px;
font-size: 20px;
color: #fff;
border: 2px solid aqua;
background: #2A363E;
padding:0 10px;
}
.select{
position: absolute;
top: 70px;
left: 475px;
}
.select>ul{
background: #0A1824;
color: #474F55;
width: 140px;
padding: 10px 0;
}
.select>ul::before
{
content: "";
position: relative;
display:inline-block;
top: -23px;
left:90px;
border-bottom: 10px solid #0A1824;
border-right: 10px solid transparent;
border-left: 10px solid transparent
}
.select>ul>li{
position: relative;
}
.select>ul>li>p{
line-height: 30px;
text-align: center;
}
.select>ul>li>ul{
position: absolute;
background: #0A1824;
color: #474F55;
width: 140px;
padding: 10px 0;
left: 155px;
top: -5px;
display:none
}
.select>ul>li>ul::before
{
content: "";
position: absolute;
display:inline-block;
top: 10px;
left:-10px;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
border-right: 10px solid #0A1824;
}
.select>ul>li>ul>li{
line-height: 30px;
text-align: center;
}
.select>ul>li>ul>li:hover{
color: aqua;
background: #474F55;
}
.select>ul>li>p:hover{
color: aqua;
background: #474F55;
}
html
<div class="box">
<div class="input">
<label for="">巡查点位:</label>
<input type="text" placeholder="请选择巡查点位" disabled>
</div>
<div class="select">
<ul style="display:none">
<li>
<p>变电东区1</p>
<ul>
<li>东1号位</li>
<li>东2号位</li>
<li>东3号位</li>
<li>东4号位</li>
</ul>
</li>
<li>
<p>变电西区2</p>
<ul>
<li>西1号位</li>
<li>西2号位</li>
<li>西3号位</li>
<li>西4号位</li>
</ul>
</li>
<li>
<p>变电南区3</p>
<ul>
<li>南1号位</li>
<li>南2号位</li>
<li>南3号位</li>
<li>南4号位</li>
</ul>
</li>
<li>
<p>变电北区4</p>
<ul>
<li>北1号位</li>
<li>北2号位</li>
<li>北3号位</li>
<li>北4号位</li>
</ul>
</li>
</ul>
</div>
</div>
js
var val = ''
$('.input').on('click', () => {
$('.select>ul').show()
})
$('.select>ul>li>p').on('click', function () {
$(this).css({
color: 'aqua',
background: '#474F55'
}).parent('li').siblings().children('p').css({
color: '#474F55',
background: '#0A1824'
})
val = $(this).text()
$('.input>input').val(val)
$(this).siblings('ul').show()
$(this).parent('li').siblings().children('ul').hide()
})
$('.select>ul>li>ul>li').on('click', function () {
$(this).css({
color: 'aqua',
background: '#474F55'
}).siblings().css({
color: '#474F55',
background: '#0A1824'
})
$('.input>input').val(val + '/' + $(this).text())
$(this).css({
color: '#474F55',
background: '#0A1824'
})
$('.select>ul>li>p').css({
color: '#474F55',
background: '#0A1824'
})
$('.select>ul').hide()
})
注: 真正的使用不要像一样 >>*>没完 还有.parent().siblings().children() 这样没完 我只是写个小dome 真正的写的时候 我会多起几个类名;