H5 选择城市
作者：互联网
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{
width: 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;
width: 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;
width: 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;
width: 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{
width: 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{
width: 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;
width: 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');
})
标签：fly,city,search,container,城市,selectors,选择,item,H5 来源： https://www.cnblogs.com/moguzi12345/p/14202044.html