1、如下图：
2、选择开始城市(到达城市雷同)：
<div class="search-selectors-item search-selectors-item-start"> <div class="title">{:lang('From')}</div> <input class="input" id="start_city" name="start_city" type="text" placeholder="{:lang('Where are you departing from?')}" value=""> <input class="input" id="start_city2" name="start_city2" type="text" placeholder="{:lang('Where are you departing from?')}" value="" style="display: none;"> <!-- 出发城市选择 --> <div class="city-container depart-city-picker start-city-container"> <p class="city-container-top"> <span class="tabItem active-tab">{:lang('Popular cities')}</span> <span class="tabItem">ABCDEFGH</span> <span class="tabItem">IJKLMNOP</span> <span class="tabItem">QRSTUVWXYZ</span> </p> <!-- 热门城市 --> <div class="city-content-container active-city"> <div class="city-content-container-remen"> {foreach name="citys" item="vo" key="key"} {foreach name="vo" item="voo" key="keyy"} {if condition="$voo.city_hot eq 1"} <div class="cityItem" data-city_code="{$voo.city_code}" data-city_id="{$voo.city_id}" data-name="{$voo.city_name}">{$voo.city_name}</div> {/if} {/foreach} {/foreach} </div> </div> <!-- ABCDEFGH --> <div class="city-content-container"> {foreach name="citys" item="vo" key="key"} {if condition="preg_match('/^[a-h]$/i',$key)"} <!-- 正则 --> <div class="city-character-content"> <div class="city-character">{$key}</div> <div class="character-cities"> {foreach name="vo" item="voo" key="keyy"} <div class="cityItem" data-city_code="{$voo.city_code}" data-city_id="{$voo.city_id}" data-name="{$voo.city_name}">{$voo.city_name}</div> {/foreach} </div> </div> {/if} {/foreach} </div> <!-- IJKLMNOP --> <div class="city-content-container"> {foreach name="citys" item="vo" key="key"} {if condition="preg_match('/^[i-p]/i',$key)"} <1-- 正则 --> <div class="city-character-content"> <div class="city-character">{$key}</div> <div class="character-cities"> {foreach name="vo" item="voo" key="keyy"} <div class="cityItem" data-city_code="{$voo.city_code}" data-city_id="{$voo.city_id}" data-name="{$voo.city_name}">{$voo.city_name}</div> {/foreach} </div> </div> {/if} {/foreach} </div> <!-- QRSTUVWXYZ --> <div class="city-content-container"> {foreach name="citys" item="vo" key="key"} {if condition="preg_match('/^[q-z]/i',$key)"} <1-- 正则 --> <div class="city-character-content"> <div class="city-character">{$key}</div> <div class="character-cities"> {foreach name="vo" item="voo" key="keyy"} <div class="cityItem" data-city_code="{$voo.city_code}" data-city_id="{$voo.city_id}" data-name="{$voo.city_name}">{$voo.city_name}</div> {/foreach} </div> </div> {/if} {/foreach} </div> </div> </div>
3、css：
.fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-content-container .city-character-content .character-cities .cityItem{ 33%; display: inline-block; vertical-align: top; padding: 5px 10px; } .fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-content-container .cityItem{ /* flex: 1; */ display: inline-block; 33%; vertical-align: top; font-size: 12px; cursor: pointer; text-align: center; padding: 5px 10px; } .fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-content-container{ padding: 10px; color: #333; font-size: 0; display: none; } } .fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-container-top{ border-bottom: 1px solid #e6e6e6; height: 55px; line-height: 55px; color: #333; font-size: 0; } .fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-container-top .tabItem{ font-size: 14px; height: 55px; line-height: 55px; text-align: center; display: inline-block; vertical-align: top; font-size: 14px; 25%; position: relative; } .fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-container-top .tabItem.active-tab{ color: #0086f6; font-weight: 500; } .fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-container-top .tabItem.active-tab::before{ content: ""; position: absolute; bottom: -1px; display: block; 100%; left: 0; border-bottom: 2px solid #0086f6; } .fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container.depart-city-picker{ position: absolute; top: 65px; left: 0; z-index: 9; } .fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-content-container-remen{ /* display:flex; */ /* flex-direction: row; */ font-size: 0; } .fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-content-container .cityItem.multi{ font-size: 12px; } .fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-content-container .city-character-content{ 100%; font-size: 0; margin-bottom: 10px; } .fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-content-container .city-character-content .city-character{ 20px; display: inline-block; vertical-align: top; font-weight: 600; color: #0086f6; font-size: 14px; } .fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-content-container .city-character-content .character-cities{ display: inline-block; vertical-align: top; flex-wrap: wrap; calc(100% - 25px); } .fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-content-container .city-character-content .character-cities .cityItem:hover,, .fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-content-container .cityItem:hover{ background-color: rgba(0,134,246,.05); color: #0086f6; } .active-city{ display: block !important; }
4、js、
//显示城市 $('#start_city').focus(function() { $('.start-city-container').addClass('active-city'); }) $('#end_city').focus(function() { $('.end-city-container').addClass('active-city'); }) //隐藏城市 $(document).click(function(event){ var _con = $('.search-selectors-item-start'); if(!_con.is(event.target) && _con.has(event.target).length === 0){ $('.start-city-container').removeClass('active-city'); } }); $(document).click(function(event){ var _con = $('.search-selectors-item-end'); if(!_con.is(event.target) && _con.has(event.target).length === 0){ $('.end-city-container').removeClass('active-city'); } });//城市字母切换 $(document).on('click', '.start-city-container .tabItem', function() { $(this).addClass('active-tab').siblings().removeClass('active-tab'); $('.start-city-container').find('.city-content-container').eq($(this).index()).addClass('active-city').siblings().removeClass('active-city'); }) $(document).on('click', '.end-city-container .tabItem', function() { $(this).addClass('active-tab').siblings().removeClass('active-tab'); $('.end-city-container').find('.city-content-container').eq($(this).index()).addClass('active-city').siblings().removeClass('active-city'); })