div+ul 模擬select下拉
阿新 • • 發佈:2018-12-08
<style> input{ width: 100px; height: 30px; text-indent: 1em; font-size: 16px; } div{ width: 100px; /* background-color: pink; */ height: 179px; z-index: 9999; overflow-y: auto; overflow-x: hidden; position: absolute; border:1px solid #9E9E9E } ul{ margin: 0; padding: 0; } li{ list-style-type: none; height: 33px; line-height: 33px; text-align: center; color: #000; font-size:16px; /* margin-bottom: 10px; */ } .bgc{ background-color: #ff33ff; } li:hover{ background-color: pink; } .triangle_border_down{ border-width: 6px 6px 0; border-style: solid; border-color: #9E9E9E transparent transparent; position: absolute; display: inline-block; left: 91px; top: 22px; } </style>
<script type="text/javascript"> $( function(){ $("#lang").click(function(){ if("block" == $("#huangbiao").css("display")){ hideLi(); }else{ showLi(); } }); $("li").each(function(i,v){ $(this).click(function(){ $("#lang").val($(this).html()); $("#lang").attr("value",$(this).attr('value')) $(this).addClass('bgc').siblings().removeClass('bgc'); hideLi(); }); }); $("#lang").blur(function(){ setTimeout(hideLi,200); }); } ); function showLi(){ $("#huangbiao").show(); } function hideLi(){ $("#huangbiao").hide(); } </script>
<input type="text" id="lang" class="input" value="" readonly="readonly" placeholder="請輸入"/> <span class="triangle_border_down"> </span> <DIV style="" id="huangbiao"> <ul> <li value="111">dddd</li> <li value="222">ssss</li> </ul> </DIV>