jQuery自定义select下拉框（一）

自定义select下拉框以满足项目的需求
直接上代码
html

    
    
    




    

        请选择
        

    
    

        
男
        
女
    

js

(function($){
    $(document).ready(function(){
        $("#selected").click(function(){
            $(".ul").show();
        });
        $("#selector, .ul").mouseleave(function(){
            $(".ul").hide();
        });
    });

    $(".ul li").click(function () {
        $("#sex").html($(this).html())
                     .attr("value",$(this).attr("value"));

        $(".ul").css("display","none");
    })

})(jQuery)

css

#selector{
    max-width: 500px;
    margin: 100px auto;
    padding: 20px;
}
.ul{
    display: none;
    list-style: none;
    margin: -2px 0 0;
    padding: 5px 0;
    border: 1px solid #313b94;
    border-top: 0;
}
.ul li{
    display: block;
    padding: 2px 5px;
    color: #000;
    text-decoration: none;
}
.ul li:hover{
    background-color: rgba(243, 229, 229, 0.678);
    color: #000;
}
#selected{
    position: relative;
    border: 1px solid #313b94;
    display: -webkit-flex;
    justify-content: space-between;
    height: 30px;
    line-height: 30px;
    padding: 0 1px;
}
#arrowBotton{
    border-left:1px solid #313b94
}
#arrowBotton>img{
    height: 100%;;
}

效果

note

1. css 选择器
   selector1,selectorN --> 群组选择器–> 将每一个选择器匹配的元素集合并
   E F -->后代选择器（包含选择器）–>选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
   E>F–>子选择器–>选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素
2. jQuery 选择器
   parent > child–> $(“div > p”)–>
   元素的直接子元素的所有

   元素
   3.jQuery 事件