<div class="Content_top">
<div class="Reserve">
<h3><span class="current">散租自驾</span><span>商务代驾</span><span> </span><span> </span><span> </span><span> </span><strong class="special_1"> </strong></h3>
<ul>
<li class="current">
<div class="Zijia">
<form id="Form1" method="post">
<table>
<tr>
<td width="30%" style="color:#BA8750;">租车城市：</td>
<td>
<input class="Area" type="text" readonly="readonly" value="请选择" id="showStartCity"/>
<!--隐藏区域开始-->
<div class="none_1" id="area_1">
<h4>
<span class="current"><a href="javascript:void(0);">热门城市</a></span>
<span><a href="javascript:void(0);">ABCDEF</a></span>
<span><a href="javascript:void(0);">HIJKLM</a></span>
<span><a href="javascript:void(0);">NPQRS</a></span>
<span style="border-right:0;"><a href="javascript:void(0);">TWXYZ</a></span>
</h4>
<div class="none_con" id="startSite">
<p class="current">
<a href="javascript:void(0);" >北京</a>
<a href="javascript:void(0);" >上海</a>
<a href="javascript:void(0);" >广州</a>
<a href="javascript:void(0);" >深圳</a>
<a href="javascript:void(0);" >杭州</a>
<a href="javascript:void(0);" >成都</a>
<a href="javascript:void(0);" >呼和浩特</a>
<a href="javascript:void(0);" >杭州</a>
</p>
<p>
<a href="javascript:void(0);">奥迪</a>
</p>
<p>
<a href="javascript:void(0);">汉口</a>
</p>
<p>
<a href="javascript:void(0);">南京</a>
</p>
<p>
<a href="javascript:void(0);">扬州</a>
</p>
</div>
</div>
<!--隐藏区域结束-->
</td>
</tr>
<tr>
<td style="color:#BA8750;">租车时间：</td>
<td>
<input id="startDate" class="Date" type="text" value="2013-09-22" onClick="WdatePicker({skin:'whyGreen'})" />
<select>
<option>00:00</option>
<option>01:00</option>
<option>02:00</option>
</select>
</td>
</tr>
<tr>
<td style="color:#BA8750;">还车城市：</td>
<td>
<input class="Area" type="text" readonly="readonly" value="请选择" id="showBackCity" />
<!--隐藏区域开始-->
<div class="none_1" id="area_2">
<h4 id="hot_2">
<span class="current"><a href="javascript:void(0);">热门城市</a></span>
<span><a href="javascript:void(0);">ABCDEF</a></span>
<span><a href="javascript:void(0);">HIJKLM</a></span>
<span><a href="javascript:void(0);">NPQRS</a></span>
<span style="border-right:0;"><a href="javascript:void(0);">TWXYZ</a></span>
</h4>
<div class="none_con" id="backSite">
<p class="current" >
<a href="javascript:void(0);">北京</a>
<a href="javascript:void(0);" >上海</a>
<a href="javascript:void(0);" >广州</a>
<a href="javascript:void(0);" >深圳</a>
<a href="javascript:void(0);" >杭州</a>
<a href="javascript:void(0);" >成都</a>
<a href="javascript:void(0);" >呼和浩特</a>
<a href="javascript:void(0);" >杭州</a>
</p>
<p>
<a href="javascript:void(0);">奥迪</a>
</p>
<p>
<a href="javascript:void(0);">汉口</a>
</p>
<p>
<a href="javascript:void(0);">南京</a>
</p>
<p>
<a href="javascript:void(0);">扬州</a>
</p>
</div>
</div>
<!--隐藏区域结束-->
</td>
</tr>
<tr>
<td style="color:#BA8750;">还车时间：</td>
<td>
<input id="endDate" class="Date" type="text" value="2013-09-22" onClick="WdatePicker({skin:'whyGreen'})" />
<select>
<option>00:00</option>
<option>01:00</option>
<option>02:00</option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td colspan="2" style="padding-top:15px;">
<a class="btn" href="javascript:void(0);" id="nextPage"></a>
</td>
</tr>
</table>
</form>
</div>
</li>
<li>
<div class="Zijia daijia">
<form id="Form1" method="post">
<table >
<tr>
<td width="30%" style="color:#BA8750;">用车城市：</td>
<td>
<input class="Area" type="text" value="请选择" onfocus="show(3)" />
<!--隐藏区域开始-->
<div class="none_1" id="area_3">
<h4 id="hot_3">
<span class="current"><a href="#">热门城市</a></span>
<span><a href="#">ABCDEF</a></span>
<span><a href="#">HIJKLM</a></span>
<span><a href="#">NPQRS</a></span>
<span style="border-right:0;"><a href="#">TWXYZ</a></span>
</h4>
<div class="none_con" id="hot_3_1">
<p class="current">
<a href="#">北京</a>
<a href="#">上海</a>
<a href="#">广州</a>
<a href="#">深圳</a>
<a href="#">杭州</a>
<a href="#">成都</a>
<a href="#">武汉</a>
<a href="#">上海</a>
<a href="#">呼和浩特</a>
<a href="#">杭州</a>
</p>
<p>
<a href="#">奥迪</a>
</p>
<p>
<a href="#">汉口</a>
</p>
<p>
<a href="#">南京</a>
</p>
<p>
<a href="#">扬州</a>
</p>
</div>
</div>
<!--隐藏区域结束-->
</td>
</tr>
<tr>
<td style="color:#BA8750;">用车类型：</td>
<td>
<input class="Car_way" type="text" value="请选择" />
<div class="none_2">
<h4>用车类型</h4>
<p>
<a href="#">接机</a>
<a href="#">送机</a>
<a href="#">时租</a>
<a href="#">半日租</a>
<a href="#">日租</a>
<a href="#">热门线路</a>
</p>
</div>
</td>
</tr>
<tr>
<td> </td>
<td colspan="2" style="padding-top:15px;">
<a class="btn" href="html/SWDJ/SWDJ_step_2.html"></a>
</td>
</tr>
</table> </form>
</div>
</li>
</ul>
</div>
<div class="Banner">
<a href=""><img src="data:images/banner_1.jpg" /></a>
<a href=""><img src="data:images/banner_2.jpg" /></a>
<a href=""><img src="data:images/banner_3.jpg" /></a>
<a href=""><img src="data:images/banner_4.jpg" /></a>
<div class="Banner_title">
<ul>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<script>
$(function(){
$("#showStartCity").click(function(){
$(this).next("div").toggle(200);
})
$("#showBackCity").click(function(){
$(this).next("div").toggle(200);
})
$(document).click(function(e){
if(e.target.id!='showBackCity'&&e.target.id!='showStartCity'&&!$(e.target).parents("div").is(".none_con")){
$("#area_1").hide();
$("#area_2").hide();
}
})
})
</script>
本文转自：http://www.cnblogs.com/-10086/p/3449591.html