Simulate select, add pictures in option

<div class="changeState">
    <div class="position-rel">
        <div class="bank_xljt">
            <img class="jt_xz" width="15" src="/img/jtx1.png" alt=""/>
        </div>
        <div id="chose_bank" class="bank_xljt1">
            <a href="javascript:;" class="hotBank-list-ico">
                <img src="/img/zhonwen.png"/>中国站
            </a>
        </div>
     </div>
     <div class="bank_xl" style="display: none">
         <ul>
             <li class="hotBank-list">
                <a href="javascript:" class="hotBank-list-ico">
                    <img src="/img/zhonwen.png"/>English
                </a>
             </li>
         </ul>
    </div>
</div>
.changeState{
     width:172px;
     height:32px;
     position:relative;
            
        .bank_xl{
           width: 100%;
           border: 1px  solid  #ccc;
           position: absolute;
           z-index: 1;
           background: #ffffff;
           border-top: 0;
                ul{
                    padding: 0;
                    margin:0;
                    li{
                         padding-left: 10px;
                         list-style: none;
                         a{
                             display: block;
                             width: 100%;
                             line-height: 30px;
                             font-size: 12px;
                             color: #666;
                            img{
                                margin-right: 10px;
                            }
                         }
                    }
                }
            }
            .position-rel {
                position: relative;
                height:32px;
                border:1px solid #ddd;
            }
            .bank_xljt{
                 position: absolute;
                 right: 0;
                 top: 0;
                 width: 50px;
                 height: 30px;
                 line-height: 30px;
                 text-align: center;
             }
             .bank_xljt1{
                 height: 32px;
                 position: absolute;
                 width: 100%;
                 top: 0px;
                 .hotBank-list-ico {
                     display: block;
                     line-height: 30px;
                     padding-left: 10px;
                     color: #666;
                     font-size: 12px;
                     img{
                         margin-right: 10px;
                     }
                 }
             }
}
$(".hotBank-list-ico").bind('click',function(){
        $('.bank_xl').hide();
        $(".jt_xz").attr("src","/img/jtx1.png");
    });
    $("#chose_bank").click(function(){
        $('.bank_xl').show();
        $(".jt_xz").attr("src","/img/jtx.png");
    });

Guess you like

Origin blog.csdn.net/fanhu6816/article/details/81742143