div自定义下拉框

时间：2021-06-22 23:49:50

因为原生的下拉框不能修改其属性，很难美化下拉框。

所以自己用div简单自定义了一下下拉框，想美化直接修改css即可

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>div模仿下拉框</title>
<style>
*{
    padding: 0;
    margin: 0;
}
.select-box{
    width: 200px;
    margin: 50px auto;
    text-align: left;
    text-indent: 5px;
/* border: 1px solid #ccc; */
    padding: 10px;
}
.select-box .select-title{
    height: 30px;
    line-height: 30px;
    display: block;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    padding: 5px 10px;
    cursor:pointer;
}
.select-box ul{
    border: 1px solid #ccc;
}
.select-box ul li{
    height: 30px;
    line-height: 30px;
    list-style: none;
    padding: 5px 10px;
    cursor: pointer;
}
.select-box ul li.current{
    background: #ebebeb;
}
.select-box ul li:not(:last-of-type){
    border-bottom: 1px solid #ccc;
}
.none{
    display: none;
}
.block{
    display: block;
}
</style>
</head>
<body>
<div class="select-box">
<span class="select-title">web前端</span><!-- 下拉标题 -->
<ul class="select-con none">
<li>web前端</li>
<li>php</li>
<li>java</li>
<li>ios</li>
<li>安卓</li>
</ul>
</div>
<script src="jquery-3.0.0.min.js"></script>    
<script>
    $(document).bind("click",function(e){
var clickMe=$(e.target);/*获取点击元素*/
if(!clickMe.hasClass("select-title")){/*点击元素不是下拉框标题时*/
            $(".select-box ul").addClass("none").removeClass("block");
if(clickMe.parent().hasClass("select-con")){/*点击元素是下拉选项时*/
var currenLiHtml=clickMe.html();/*获取点击的下拉选项HTML*/
                $(".select-title").html(currenLiHtml);/*把点击的下拉选项HTML放到下拉标题*/
                clickMe.addClass("current").siblings().removeClass("current");/*给点击的下拉选项加背景色*/
            }
        }else if($(".select-box ul").hasClass("none")){/*点击下拉标题时如果有none类的话*/
            $(".select-box ul").addClass("block").removeClass("none");

        }else if($(".select-box ul").hasClass("block")){/*点击下拉标题时如果有block类的话*/
            $(".select-box ul").addClass("none").removeClass("block");
        }
    })
</script>
</body>
</html>

 

标签：

相关文章