手机端根据区域和距离弹出选择效果

手机端根据区域和距离计算问题

代码运行效果截图：

具体代码如下：

css文件

@charset "utf-8";
*{margin:0;padding:0;border:0} 
body{ font-family: Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self; font-size:12px} 
.nav{
	list-style-type: none;
	line-height: 40px;
	height: 40px;
	width: 100%;
} 
.city_tit, .loca_tit{
	float: left;
	width: 50%;
	text-align: center;
	background-color: #fff;
	border-bottom: 1px solid #ddd;
	color: #333;
	font-size: 14px;
} 
.city_tit{
	background-image:url(../../images/popwindow/city_m.png);
	background-size:20px;
	background-repeat: no-repeat;
	background-position: 25% 50%;
}
.loca_tit{
	background-image:url(../../images/popwindow/loca.png);
	background-size:18px;
	background-repeat: no-repeat;
	background-position: 18% 50%;
}
.city_list, .loca_det{
	list-style-type: none;
	text-align: left;
	left: -999em;
	position: absolute;
	z-index: 1000000;
	width: 50%;
	
	
} 
.nav li ul li{
	float: left;
	width: 90%;
	background:rgba(239, 239, 239, 0.9);
	font-size: 12px;
	border-bottom: 1px solid #ddd;
	padding-left: 10%;
} 
.nav li ul li:hover {
	color: #F3F3F3;
	text-decoration: none;
	font-weight: normal;
	background:rgba(244, 137, 172, 0.9);
} 
.navdisplay{left: auto} 
/*.nav li:hover ul{left: auto} 
.nav li.sfhover ul{left: auto} */
.content{clear: left} 

js代码

var clickState=0;

$(".city_tit").on("click", function (event) {
		if(clickState==0){
			$(".city_list").addClass("navdisplay");
			$(".loca_det").removeClass("navdisplay");
			clickState=1;
		}else{
			//隐蔽列表
			$(".city_list").removeClass("navdisplay");
			clickState=0;
		}
  	});
  	
  	$(".loca_tit").on("click", function (event) {
  		if(clickState==0){
  			$(".loca_det").addClass("navdisplay");
			$(".city_list").removeClass("navdisplay");
			clickState=1;
  		}else{
  			$(".loca_det").removeClass("navdisplay");
			clickState=0;
  		}
  	});
  	
  	//点击城市列表
  	$(".city_list li").on("click", function (event) {
  		if($(this).val()==0){
  			districtid='';
  		}else{
  			districtid=$(this).val();
  		}
  		
		$("#cityStr").html(": "+$(this).text());
		$('#showshops').html("");
		page=1;
		getBusinessData(page,districtid,distance);
  	});
  	//点击距离列表
  	$(".loca_det li").on("click", function (event) {
  		if($(this).val()==0){
  			distance='';
  		}else{
  			distance=$(this).val();
  		}
  		
		$("#locaStr").html(": "+$(this).text());
		$('#showshops').html("");
		page=1;

<span style="white-space:pre">		</span>//我的ajax查询方法 
		getBusinessData(page,districtid,distance);
  	});

html代码

<ul class="nav" id="nav"> 
					<li class="city_tit">区域<span id="cityStr"></span>
					    <ul class="city_list" id="city_list"> 
					    	
						    <!--<li class="city" value="0">西安</li> 
						    <li class="city" value="1">安康</li> 
						    <li class="city" value="2">汉中</li> 
						    <li class="city" value="3">渭南</li> 
						    <li class="city" value="4">延安</li> 
						    <li class="city" value="5">宝鸡</li> -->
						    
					    </ul> 
					</li> 
					<li class="loca_tit">距离<span id="locaStr"></span>
					    <ul class="loca_det" id="loca_det"> 
						    <!--<li class="loca" value="0">不限</li> 
						    <li class="loca" value="1">200m</li> 
						    <li class="loca" value="2">500m</li> 
						    <li class="loca" value="3">1000m</li> 
						    <li class="loca" value="4">2km</li> -->
					    </ul> 
					</li> 
				</ul>

其中引入zepto或者jquery