jquery點擊區域顯示或隱藏DIV,點擊非該DIV的地方隱藏該DIV

<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="images/banner_1.jpg" /></a>
            <a href=""><img src="images/banner_2.jpg" /></a>
            <a href=""><img src="images/banner_3.jpg"  /></a>
            <a href=""><img src="images/banner_4.jpg" /></a>
            <div class="Banner_title">
                <ul>
                    <li class="current"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>

 

$("#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(); } }) })