玩转CSS：用ul li +JS 模拟select，避坑浏览器不兼容。
在前端的工作中，经常会遇到 selcet控件，但我们用css来写它的样式时候，总是不那么令人满意，各种浏览器不兼容啊有没有？
那么，我本篇文章就给大家提供一个思路：用UL 和li 模拟 select 控件，让我们用起来可以避免令人心烦的调整样式问题。好了，接下来，我们看图：
本例图片
文档结构
<div class="model-select-box">
<div id="model-select-text" class="model-select-text" value="" class="">请选择</div>
<b class="bg1"></b>
<ul class="model-select-option">
<li data-option="red" class="red">红色</li>
<li data-option="orange" class="orange">橙色</li>
<li data-option="yellow" class="yellow">黄色</li>
<li data-option="green" class="green">绿色</li>
<li data-option="cyan" class="cyan">青色</li>
<li data-option="blue" class="blue">蓝色</li>
<li data-option="purple" class="purple">紫色</li>
</ul>
</div>CSS样式
*{
margin:0;
padding: 0;
}
ul {
list-style: none;
}
.model-select-box {
float: left;
width: auto;
min-width: 90px;
height: auto;
line-height: 22px;
margin-right: 10px;
position: relative;
font-size: 0.8rem;
box-sizing: border-box;
z-index: 99;
transform: translateY(-5px);
user-select: none;
background: #ccc;
border-radius: 5px;
}
.model-select-box:hover .model-select-option{
display: block;
}
.model-select-option {
display: none;
position: absolute;
background: #fff;
width: calc(100% - 2px);
top:28px;
border-radius: 0 0 5px 5px;
border: 1px solid #ccc;
}
.model-select-option li {
padding: 4px 10px;
text-align: center;
}
.model-select-option li a{
color: #666;
display: block;
width: 100%;
height: 30px;
line-height: 30px;
}
.model-select-option li+li{
border-top:1px solid #ccc;
}
.model-select-option li:hover{
color: #000;
font-weight: 700;
}
/* 小三角 */
.bg1{
position: absolute;
top:12px;
right:10px;
border-width: 6px;
border-style: solid;
border-color: #666 transparent transparent transparent;
}
.model-select-text{
display: block;
padding: 4px 10px;
padding-right: 20px;
}
.red,
.orange,
.yellow,
.green,
.cyan,
.blue,
.purple{
display: block;
padding: 4px 10px;
padding-right: 20px;
cursor: pointer;
color: #666;
}
.model-select-text{
color: #666;
}
.red{ background: red; }
.orange{ background:orange; }
.yellow{ background:yellow; }
.green{ background:green; }
.cyan{ background:cyan; }
.blue{ background:blue; }
.purple{ background:purple; }
在这里，我们预先隐层了UL，然后使用hover 显示了隐藏起来的ul。原理很简单，大家分析一下上面CSS样式表即可。
JQ代码
接下来，我们就要实现li 点击后，将li设置为选中状态，并且，将 被选中的li的value传递给 目标div。这里，必然需要用到js。那么，我们看代码：
/*
* 模拟网页中所有的下拉列表select
*/
function selectModel() {
var $box = $('div.model-select-box');
var $option = $('ul.model-select-option', $box);
var $txt = $('div.model-select-text', $box);
var speed = 10;
var $bg = $('b.bg1',$box)
// 点击小三角
$bg.click(function(){
$option.not($(this).siblings('ul.model-select-option')).slideUp(speed, function () {
});
$(this).siblings('ul.model-select-option').slideToggle(speed, function () {
// int($(this));
});
return false;
})
/*
* 单击某个下拉列表时，显示当前下拉列表的下拉列表框
* 并隐藏页面中其他下拉列表
*/
$txt.click(function (e) {
$option.not($(this).siblings('ul.model-select-option')).slideUp(speed, function () {
});
$(this).siblings('ul.model-select-option').slideToggle(speed, function () {
// int($(this));
});
return false;
});
//点击选择，关闭其他下拉
/*
* 为每个下拉列表框中的选项设置默认选中标识 data-selected
* 点击下拉列表框中的选项时，将选项的 data-option 属性的属性值赋给下拉列表的 data-value 属性，并改变默认选中标识 data-selected
* 为选项添加 mouseover 事件
*/
$option.find('li').each(function(index,element){
// console.log($(this) + '1');
if($(this).hasClass('selected')){
$(this).parent('.model-select-option').siblings('.model-select-text').text($(this).text())
}
$(this).mousedown(function(){
$(this).parent().siblings('#model-select-text').text($(this).text()).attr('class', $(this).attr('data-option'));
$option.slideUp(speed, function () {
});
$(this).addClass('selected').siblings('li').removeClass('selected');
return false;
})
$(this).on('mouseover',function(){
$(this).addClass('selected').siblings('li').removeClass('selected');
})
})
//点击文档，隐藏所有下拉
$(document).click(function (e) {
$option.slideUp(speed, function () {
});
});
}
selectModel();
})还有，别忘了引用 JQ库
<script src="jquery-3.6.3.min.js"></script>大功告成
好了，至此，这个用ul li模拟select的功能代码就算完成了，具体表现可以通过修改样式表来实现。
看完了的同学，请帮忙点赞+关注+评论！谢谢！
完整代码下载点这里
