jQuery 点击input框标题收起
阅读原文时间:2023年07月10日阅读:3


<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <link rel="stylesheet" type="text/css" href="css/bootstrap4.5.min.css" />  
    <style type="text/css">  
        .box2 {  
            position: relative;  
            width: 300px;  
            border: 1px solid #ccc;  
        }

        .box2 .label {  
            position: absolute;  
            left: 20px;  
            top: 11px;  
            transition: all 0.3s;  
        }

        .box2 .inputs {  
            padding: 12px 0 12px 80px;  
            border: none;  
            /\*border-bottom: 1px solid #9E9E9E;\*/  
            width: 100%;  
        }

         :focus {  
            outline: -webkit-focus-ring-color auto 0px;  
            outline-color: -webkit-focus-ring-color;  
            outline-style: auto;  
            outline-width: 0px;  
        }

        .box2 .label.label12 {  
            position: absolute;  
            left: 5px;  
            top: 0px;  
            font-size: 12px;  
        }

        .box2 .ins {  
            padding: 19px 10px 5px !important;  
        }  
        /\*下拉选\*/

        .selectes {  
            position: relative;  
            width: 500px;  
            height: 50px;  
            border: 1px solid #ccc;  
            padding: 17px 35px 5px 10px;  
            cursor: pointer;  
            /\*background-color: aliceblue;\*/  
        }

        .selectTitle {  
            position: absolute;  
            font-size: 12px;  
            left: 5px;  
            top: 0px;  
        }

        .imgs {  
            width: 20px;  
            position: absolute;  
            right: 7px;  
            top: 15px;  
            transition: all .6s;  
            transform: rotate(180deg);  
        }

        .imgs2 {  
            transform: rotate(0deg);  
        }

        .option-con>img {  
            /\*width: 60px;\*/  
            height: 18px;  
            vertical-align: middle;  
        }

        .list-option {  
            border: 1px solid #ccc;  
            width: 500px;  
            height: 200px;  
            overflow: auto;  
            display: none;  
        }

        .list-option ul,  
        li {  
            list-style: none;  
        }

        .list-option li:hover {  
            background-color: #dcdcdc;  
            cursor: pointer;  
        }  
    </style>  
</head>

<body>  
        <div class="box2 m-5">  
            <span for="" class="label">姓名</span>  
            <input type="" class="inputs mochu" name="name2" id="name2" value="" placeholder=""/>  
        </div>

        <div class="box2 m-5">  
            <span for="" class="label">年龄</span>  
            <input type="" class="inputs mochu" name="name2" id="name2" value="" placeholder=""/>  
        </div>

        <div class="selectes mx-5 mt-5" onclick="selects(this)">  
            <span for="" class="selectTitle text-black-50">物流</span>  
            <div class="selCon">  
                <div class="option-con h-100 d-flex justify-content-start align-items-center">  
                    <span class="px-3" name="name2" id="name2" value="">Please choose</span>  
                </div>  
            </div>  
            <img class="imgs" src="img/arrows.png" />  
        </div>  
        <div class="mx-5 list-option">  
            <ul class="p-2 mb-0"></ul>  
        </div>

        <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>  
        <script type="text/javascript">  
            $(function() {  
                //取获焦点  
                focuss();

                var datas = \[{  
                    id: "1",  
                    logistics: "img/mts.jpg",  
                    other: "Hub Brand",  
                    price: "929+"  
                }, {  
                    id: "2",  
                    logistics: "img/new-ems.jpg",  
                    other: "Spoke Head",  
                    price: "289+"  
                }, {  
                    id: "3",  
                    logistics: "img/new-tpd.jpg",  
                    other: "Brake System",  
                    price: "869+"  
                }, {  
                    id: "4",  
                    logistics: "img/fedex.jpg",  
                    other: "Flyweight",  
                    price: "889+"  
                }, {  
                    id: "5",  
                    logistics: "img/new-ems.jpg",  
                    other: "Center Channel Hole",  
                    price: "909+"  
                }, {  
                    id: "6",  
                    logistics: "img/mts.jpg",  
                    other: "Rim Warranty",  
                    price: "239+"  
                }, {  
                    id: "7",  
                    logistics: "img/fedex.jpg",  
                    other: "Standard",  
                    price: "791+"  
                }, {  
                    id: "8",  
                    logistics: "img/imgList/vehicle1.jpg",  
                    other: "Matte Mango",  
                    price: "1791+"  
                }, {  
                    id: "9",  
                    logistics: "img/imgList/vehicle2.jpg",  
                    other: "Turquoise",  
                    price: "191+"  
                }, {  
                    id: "11",  
                    logistics: "img/imgList/vehicle3.jpg",  
                    other: "straight pull",  
                    price: "330+"  
                }, {  
                    id: "12",  
                    logistics: "img/imgList/vehicle4.jpg",  
                    other: "J-bend",  
                    price: "210+"  
                }, {  
                    id: "13",  
                    logistics: "img/imgList/vehicle5.jpg",  
                    other: "Center lock",  
                    price: "214+"  
                }, {  
                    id: "14",  
                    logistics: "img/imgList/vehicle6.jpg",  
                    other: "Industry Nine Hydra",  
                    price: "130+"  
                }, {  
                    id: "15",  
                    logistics: "img/imgList/vehicle7.jpg",  
                    other: "Chris King ISO AB / ISO B",  
                    price: "1110+"  
                }, {  
                    id: "16",  
                    logistics: "img/imgList/vehicle8.jpg",  
                    other: "Hope Pro 4",  
                    price: "118+"  
                }  
                \]  
                $.each(datas, function(index, item) {  

// console.log(item.logistics);
var html = `

  • ${item.other} USD: ${item.price}
  • `;
    $(".list-option>ul").append(html);
    })

                    lis();  
                })  
                //失去焦点  
                blurs();
    
                //失去焦点  
                function blurs() {  
                    $('.inputs').blur(function() {  
                        $(this).prev(".label").removeClass("label12");  
                        $(this).removeClass("ins");  
                        $(this).css('border-color', '#9E9E9E');  
                    });  
                }
    
                //获取焦点  
                function focuss() {  
                    $('.inputs').focus(function() {  
                        $(this).bind('input propertychange', function() {  
                            if($(this).val().length > 0) {  
                                $(this).css('border-color', 'blue');  
                                $(this).unbind("blur");  
                            } else {  
                                blurs();  
                                $(this).css('border-color', 'red');  
                            }  
                        })  
                        $(this).prev(".label").addClass("label12");  
                        $(this).addClass("ins");
    
                    });  
                }
    
                //下拉选  
                function selects(that) {  
                    //方案一:  
                    //$(".list-option").slideToggle();
    
                    //方案二:  
                    if($(".list-option").is(":hidden")){  
                        $(".list-option").slideDown(200);  
                        $(that).find(".imgs").addClass("imgs2");  
                    }else{  
                        $(".list-option").slideUp(200);  
                        $(that).find(".imgs").removeClass("imgs2");  
                    }  
                }
    
                //下拉选内容  
                function lis() {  
                    $(".list-option>ul").on("click","li",function() {  
                        var selEl = $(this).children().clone();  
                        $(".selCon").html(selEl);  
                        $(".list-option").slideUp(200);  
                        $(".imgs").removeClass("imgs2");  
                        console.log($(this).children().text().replace(/\\s\*/g, ""));  
                    })  
                }  
            </script>  
        </body>

    效果预览: