首页 > 代码库 > 【4】自定义下拉框

【4】自定义下拉框

2024-09-26 13:44:39   218人阅读

<!DOCTYPE html>
<html lang="en">

 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>模拟下拉框</title>
    <style>
<!-- CSS-->

* {margin:0;padding:0}
ul,li {list-style:none;}
.selectTotal {width:200px;position:relative;font-size:12px;}
.selectText {height:100%;line-height:40px;padding-left:10px;border:1px solid #c1c1c1;}
.selectLi {height:28px;line-height:28px;padding-left:10px;}
.selectLi:hover {background:#ff5d5b;color:white;}
.selectLiLast {border-bottom:none;}
.selectUl {border:1px solid #c1c1c1;border-top:none;display:none;position:absolute;top:42px;left:0;width:198px;}
.arrow {position:absolute;top:19px;right:10px;height:6px;}

    </style>
</head>
<!-- HTML-->
<div class="selectTotal">
    <div class="selectText">河南</div>
    <ul class="selectUl">
        <li class="selectLi" value="http://www.mamicode.com/1">河南</li>
        <li class="selectLi" value="http://www.mamicode.com/2">苏州</li>
        <li class="selectLi" value="http://www.mamicode.com/3">海南</li>
        <li class="selectLi selectLiLast" value="http://www.mamicode.com/4">大连</li>
    </ul>
    <img src="http://www.mamicode.com/1.png"  class="arrow">
</div>
</body>
<script src="http://www.mamicode.com/jquery.js"></script>
<!-- JS-->
<script>
    $(".selectText,.arrow").click(function (ev) {
        ev.stopPropagation();
        var ul = $(".selectUl");
        if (ul.css("display") == "none") {
            ul.slideDown("fast");
        } else {
            ul.slideUp("fast");
        }
    });

 

    $(".selectLi").map(function () {
        $(this).click(function () {
            var txt = $(this).text();
            $(".selectText").html(txt);
            $(".selectUl").hide();
            console.log($(this).attr(‘value‘));
        });
    })

 

    //当点击空白处，隐藏列表
    $(document).click(function () {
        $(‘.selectUl‘).hide();
    });

 

</script>

 

</html>

【4】自定义下拉框


联系
我们