仿写select

初学前端记录下学习成果

<style>
    .select_box {
    display: inline-block;
    width: 308px;
    height: 22px;
    margin-left: 10px;
    position: relative;
}

.select_div {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.select_con {
    flex: 1;
    padding-left: 10px;
}

.tc_ul {
    display: none;
    margin-left: 0;
    padding-left: 0;
    position: absolute;
    border: 1px solid #ccc;
    background: white;
    /*border-radius: 4px;*/
    /*border-bottom: 0px;*/
}

.tc_ul_active {
    border-color: #1E9FFF !important;
}
.tc_li_select{
    color: #1E9FFF;
    /*background: #1E9FFF;*/
}
.tc_ul li {
    list-style: none;
    padding: 3px;
    /*border-bottom: 1px solid #ccc;*/
    /*margin: 0px -1px -1px 0px;*/
    cursor: pointer;
}

.tc_ul li:hover {
    background: #1E9FFF;
    color: white;
    opacity: 0.5;
}

/*.triangle-up{*/
/*    display:inline-block;*/
/*    width:0;*/
/*    height:0;*/
/*    border-left:10px solid transparent;*/
/*    border-right: 10px solid transparent;*/
/*    border-bottom:10px solid red;}*/
.triangle-down {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid black;
}

/*#triangle-left {*/
/*    display:inline-block;*/
/*    width:0;*/
/*    height:0;*/
/*    border-top: 30px solid transparent;*/
/*    border-right: 50px solid red;*/
/*    border-bottom: 30px solid transparent;}*/
/*#triangle-right{*/
/*    display:inline-block;*/
/*    width:0;*/
/*    height:0;*/
/*    border-top: 30px solid transparent;*/
/*    border-left: 50px solid red;*/
/*    border-bottom: 30px solid transparent;}*/

</style>

<div class="select_box">
    <div id="select_div" class="select_div" οnclick="showAndHiddenUl()">
        <div id="select_con" class="select_con">图</div>
        <div class="triangle-down" style="margin-right: 10px"></div>
    </div>
    <ul class="tc_ul" id="select_ul">
        <li data_value="1">图</li>
        <li data_value="2">表</li>
        <li data_value="5">公式</li>
    </ul>
</div>

<script>
    $(function () {
        $("#select_ul").width($("#select_div").width());
        $("#select_ul li").click(function () {
            clickli($(this), 200);
        })

        $(document).click(function (e) {
            var _con = $('#select_div'); // 设置目标区域
            var _con2 = $("#select_ul li");
            if ((!_con.is(e.target) && _con.has(e.target).length === 0) && (!_con2.is(e.target) && _con2.has(e.target).length === 0)) {
                if ($("#select_ul").is(':visible')) {
                    showAndHiddenUl(200);
                }
            }
        })
        //默认执行第几个
        let type = "2";
        var li = $("li[data_value=" + type + "]");
        clickli(li, 0);
    })

    function showAndHiddenUl(time) {
        $("#select_ul").slideToggle(time);
        $("#select_div").toggleClass('tc_ul_active');
    }

    function clickli(li, time) {
        var text = li.html();
        $("#select_con").html(text);
        if (time > 0) {
            showAndHiddenUl(time);
        }
        //获取点击li的值
        var type = li.attr("data_value");
        //为选中添加class并移除其他的class
        li.addClass("tc_li_select").siblings().removeClass("tc_li_select");
        console.log(type + "  更加改变的data_value值执行自己操作")
    }

</script>

下载链接自定义selecthtml、js、css-Javascript文档类资源-CSDN下载