今天公司app ios版内测,发现select在安卓和ios上样式不统一,并且不好修改,一气之下放弃使用select,手写了一个用div模仿select的模块
话不多说上代码
//样式
.zezhao {
100%;
height: 800px;
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0;
}
.disn {
display: none;
}
.disb {
display: block;
}
.yuan {
overflow: hidden;
border-radius: 11px;
border: 1px solid black;
}
.yuany {
margin-left: 4px;
margin-top: 4px;
float: left;
overflow: hidden;
border-radius: 6px;
border: 1px solid #16A086;
background-color: #16A086;
}
.yuanx {
overflow: hidden;
border-radius: 11px;
border: 1px solid #16A086!important;
}
//html布局
<div class="kuang">
<h3 class="margin">商家类别 * </h3>
<span class="margin">请选择此项</span>
<div id="se" style=" 91%; border-radius: 5px; height: 39px; line-height: 39px; padding-left: 10px;font-size: 14px; border: 1px solid black; background-color: white;">请选择</div>
<input id="see" type="hidden" name="" id="" value="" />
</div>
<div class="zezhao disn">
<div style="border-radius: 4px; 85%;background-color: white;margin: 0 auto; margin-top: 20px;">
<ul id="u" style=" overflow: hidden; overflow:scroll;">
<foreach name="catOb" item="v">
<li class="l" style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc;padding-left: 30px;" onclick="zjm('{$v.zs_name}','{$v.id}')" value="{$v.id}"><span style="float: left;">{$v.zs_name}</span>
<div id="{$v.id}" class="yuan" style=" 20px; height: 20px;margin-top: 14.5px; float: right; margin-right: 10px;">
<span class="" style=" 10px;height: 10px;"></span>
</div>
</li>
</foreach>
</ul>
</div>
</div>
//jq方法
<script type="text/javascript" charset="utf-8">
var h = window.screen.height * 0.7;
var mh = window.screen.height * 0.1;
console.log(h)
$("#u").css("height", h);
$("#u").css("margin-top", mh);
$('#se').click(function() {
$('.zezhao').removeClass('disn');
$('.zezhao').addClass('disb');
})
function zjm(a, b) {
$('#se').text(a);
$('#see').val(b);
$('#' + b + '').addClass('yuanx');
$('#' + b + '').parents().siblings().children().removeClass('yuanx');
$('#' + b + ' span').addClass('yuany');
$('#' + b + '').parents().siblings().children().children().removeClass('yuany');
}
$('.l').click(function() {
$('.zezhao').removeClass('disb');
$('.zezhao').addClass('disn');
})
</script>