jQuery 点击input框标题收起
<!DOCTYPE html> <html> <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 = `<li> <div class="option-con py-1 d-flex justify-content-start align-items-center"> <img class="" src="${item.logistics}" /> <span class="px-3" name="name2" id="name2" value="">${item.other}</span> <span class="text-black-50" name="name2" id="name2" value="">USD: <span>${item.price}</span></span> </div> </li>`; $(".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> </html>
效果预览: