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

• 01
• 02
• 03
• 04
• 05
• 06
• 07

操作方法

• 01

  准备好需要用到的图标。这里还需要自己准备银行卡logo图标
• 02

  新建html文档。
• 03

  书写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="display: none"> <ul> <li class="hotBank-list"> <a href="javascript:" class="hotBank-list-ico "  title="中国农业银行"> <img src="images/zs1.png" width="150" alt=""/> </a> </li> <li class="hotBank-list"> <a href="javascript:" class="hotBank-list-ico "  title="中国建设银行"> <img src="images/zs2.png" width="150" alt=""/> </a> </li> <li class="hotBank-list"> <a href="javascript:" class="hotBank-list-ico "  title="中国工商银行"> <img src="images/zs3.png" width="150" alt=""/> </a> </li> <li class="hotBank-list"> <a href="javascript:" class="hotBank-list-ico "  title="中国银行"> <img src="images/zs4.png" width="150" alt=""/> </a> </li> <li class="hotBank-list"> <a href="javascript:" class="hotBank-list-ico "  title="中国光大银行"> <img src="images/zs5.png" width="150" alt=""/> </a> </li> <li class="hotBank-list"> <a href="javascript:" class="hotBank-list-ico "  title="华夏银行"> <img src="images/zs6.png" width="150" alt=""/> </a> </li> <li class="hotBank-list"> <a href="javascript:" class="hotBank-list-ico "  title="中国民生银行"> <img src="images/zs7.png" width="150" alt=""/> </a> </li> <li class="hotBank-list"> <a href="javascript:" class="hotBank-list-ico "  title="平安银行"> <img src="images/zs8.png" width="150" alt=""/> </a> </li> <li class="hotBank-list"> <a href="javascript:" class="hotBank-list-ico "  title="兴业银行"> <img src="images/zs9.png" width="150" alt=""/> </a> </li> </ul> </div> </div> </td> </tr> </table> </div> </div>
• 04

  书写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: 3px; border-bottom: 1px solid #ccc; padding-left: 5px; } .bank_xl>ul>li>a { display: block; width: 100%; } .bank_xljt { position: absolute; right: 0px; top: 1px; width: 50px; height: 33px; line-height: 33px; 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: 13px; } .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; display: none; }
• 05

  书写并添加js代码。 <script src="js/jquery-1.11.1.min.js"></script> <script src="js/bs.js"></script> <script> $(function(){ $(".hotBank-list-ico").bind('click',function(){ $('#chose_input').val($(this).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 (navigator.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>
• 06

  代码整体结构。
• 07

  查看效果。
• End