zc100/template/mobile-bak2_1/components/choose/style_1.htm

<link rel="stylesheet" href="/template/pc/components/choose/style_1.css"   media="all">
<div class="layui-col-xs2 qy-2-2 area">

    <span class="span-1">
        <img src="https://oss.zc10000.com/static/images/018.svg" />
    </span>

    <span class="font-1 span-2">
        {eyou:if condition='($eyou.site.name)'}
            {$eyou.site.name} 
        {eyou:else /}
            {eyou:if condition='($page == "zccat-detail-list" || $site_1 == "shandong" && $domain[0] == "www")'}
                山东
            {eyou:else /}
                请选择地区
            {/eyou:if}
        {/eyou:if}
    </span>

    <span class="span-3">
         <img src="https://oss.zc10000.com/static/images/019.svg" />
    </span>

    <div class="citys hide" style="top: 32px;width: 400px; z-index: 1000; position: absolute; background-color: aliceblue;min-height:130px;border-radius: 5px;z-index:9000;">
        <li class="" style="float: left; padding: 2px 10px;">
            <a href='https://www.zc10000.com/shandong'>山东</a>
        </li>
        {eyou:citysite type='top' loop='50' currentclass='active'}
        <li class="" style="float: left; padding: 2px 10px;">
            <a href='{$field.siteurl}'>{$field.name}</a>
        </li>
        {/eyou:citysite}
    </div>

</div>

<script>
    layui.use(['jquery'], function(args){
        var $ = layui.jquery;
        $(".area").on("click", function() {
            $(".citys").toggleClass("hide");
        })

        $(".citys").hover(function(){
            //鼠标进入和离开事件
        },function() {
            //离开就恢复初始样式
            $(".citys").addClass("hide");
        });
    });    
</script>