jquery电脑手机端通用银行选择下拉菜单

1准备好需要用到的图标。这里还需要自己准备**logo图标2新建html文档。3书写hmtl代码。<div class="container-fluid" id="con"><div class="row bg-fff par-top-40 pad-right-15" id="bank_show1" ><table class="table"><tr><td class="form_td border-none td_bot" >姓名</td><td class="border-none td_bot"><input type="text" class="form-control" placeholder="请输入姓名"/></td></tr><tr><td class="form_td border-none td_bot">**号</td><td class="border-none td_bot"><input type="text" class="form-control" placeholder="请输入**号"/></td></tr><tr><td class="form_td border-none td_bot">选择银行</td><td class="border-none td_bot"><div class="position-rel"><div class="position-rel"><input type="text" id="chose_input" class="form-control" placeholder="--**--"/><div class="bank_xljt"><img class="jt_xz" width="20" src="images/jtx.png" alt=""/></div><div id="chose_bank" class="bank_xljt1"></div></div><div class="bank_xl" style="d**play: none"><ul><li class="hotbank-l**t"><a href="j**ascript:" class="hotbank-l**t-ico " title="**农业银行"><img src="images/zs1.png" width="150" alt=""/></a></li><li class="hotbank-l**t"><a href="j**ascript:" class="hotbank-l**t-ico " title="**建设银行"><img src="images/zs2.png" width="150" alt=""/></a></li><li class="hotbank-l**t"><a href="j**ascript:" class="hotbank-l**t-ico " title="**工商银行"><img src="images/zs3.png" width="150" alt=""/></a></li><li class="hotbank-l**t"><a href="j**ascript:" class="hotbank-l**t-ico " title="**银行"><img src="images/zs4.png" width="150" alt=""/></a></li><li class="hotbank-l**t"><a href="j**ascript:" class="hotbank-l**t-ico " title="**光大银行"><img src="images/zs5.png" width="150" alt=""/></a></li><li class="hotbank-l**t"><a href="j**ascript:" class="hotbank-l**t-ico " title="华夏银行"><img src="images/zs6.png" width="150" alt=""/></a></li><li class="hotbank-l**t"><a href="j**ascript:" class="hotbank-l**t-ico " title="**民生银行"><img src="images/zs7.png" width="150" alt=""/></a></li><li class="hotbank-l**t"><a href="j**ascript:" class="hotbank-l**t-ico " title="平安银行"><img src="images/zs8.png" width="150" alt=""/></a></li><li class="hotbank-l**t"><a href="j**ascript:" class="hotbank-l**t-ico " title="兴业银行"><img src="images/zs9.png" width="150" alt=""/></a></li></ul></div></div> </td></tr></table></div></div>4书写css代码。.mar5 { margin-top: 6px; }.btn-to { position: fixed; width: 100%; max-width: 640px; bottom: 80px; }.bank_wz { background: #f6ac19; padding: 10px 0px; color: #fff; border-radius: 5px 5px 0px 0px; padding-left: 6%; padding-right: 6%; }.bank_wz1 { padding: 20px 0px; background: #fff; padding-left: 6%; padding-right: 6%; }.form_td { line-height: 34px !important; width: 94px; text-align: right; }.td_bot { padding: 10px 8px 0px 8px !important; }.bank_xl { width: 100%; border: 1px solid #ccc; border-top: 0px; border-bottom: 0px; position: absolute; z-index: 1; background: #ffffff; }.bank_xl>ul>li { padding-top: 4px; padding-bottom: **x; border-bottom: 1px solid #ccc; padding-left: 5px; }.bank_xl>ul>li>a { d**play: block; width: 100%; }.bank_xljt { position: absolute; right: 0px; top: 1px; width: 50px; height: 3**x; line-height: 3**x; text-align: center; border-left: 1px solid #ccc; }.bank_xljt1 { height: 32px; position: absolute; width: 100%; top: 0px; }.td_run { width: 96px; text-align: right; }.border-orange { border: 1px solid #f6ac19; }.erdate { position: absolute; width: 15px; right: 27px; top: 1**x; }.color-green { color: #27d8a1; }.line-height-34 { line-height: 34px !important; }.peerdiv_table { padding: 10px; box-shadow: 0px 0px 10px #dfdada; }.abs-6 { position: absolute; top: 6px; left: 0px; d**play: none; }5书写并添加js代码。<script src="js/jquery-1.11.1.min.js"></script><script src="js/bs.js"></script><script>$(function(){$(".hotbank-l**t-ico").bind('click',function(){ $('#chose_input').val($(th**).attr('title'));$('.bank_xl').hide();$("#chose_bank").parent('div').find('img').addclass('jt_xz');});$("#chose_bank").click(function(){$('.bank_xl').show();$("#chose_bank").parent('div').find('img').removeclass('jt_xz');});})</script><script>if (n**igator.useragent.match(/iemobile\/10\.0/)) {var msviewportstyle = document.createelement('style')msviewportstyle.appendchild(document.createtextnode('@-ms-viewport{width:auto!important}'))document.queryselector('head').appendchild(msviewportstyle)}</script>6代码整体结构。7查看效果。end 20210311