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>    
<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

时间： 2024-08-27 18:45:56

jquery点击区域显示或隐藏DIV,点击非该DIV的地方隐藏该DIV的相关文章

点击div和某些控件之外的地方隐藏div，点击div不隐藏。对象 click和document click冲突有关问题

帮朋友解决这个问题,我发现用以往想想像的方式来实现,貌似不太可行,所以从网上找了一些解决办法,进行优化,这篇比较详细,所以拿来备忘,另一方面也希望可以帮助需要的同学! 问题背景:jQuery事件问题!!对象 click和document click冲突问题 我想点击某个元素显示一个对象, 点击页面任意处,隐藏这个对象 //点击look对象,显示隐藏mydiv $("#look").bind("click", function () {      $("#m

win8不通过新打开窗口进行打开和保存文件，点击即显示文本内容，点击即保存文件

前面的一篇博客讲到通过打开新窗口进行打开和保存文件,这一篇则重点介绍怎样一步到位来进行打开和保存文件(这里还以.txt文本文件为例). 我们要打开.txt文本文件,无非是想要里面的文本内容,并且把其显示到页面里罢了,那我们能不能直接点击按钮就让文件的内容自动显示到页面上............ 而不需要经过打开新窗口这一步骤呢 同样,我们点击保存按钮,能不能就直接给文件命名为自己想要的名称,而且直接保存到自己想要的位置或者文件里........ 而不经过打开新窗口定位某一个具体的文件夹下这一步骤

jquery实现的点击页面其他地方隐藏显示的元素

jquery实现的点击页面其他地方隐藏显示的元素:在实际应用中,可能有这样的效果,那就是有这样一个弹出层,点击层本身的时候,这个层不会隐藏,而点击除去层之外的页面其他地方则会将这个层隐藏,下面就通过代码实例介绍一下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="

点击页面其它地方隐藏div所想到的jQuery的delegate

在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始,假如页面有一个id为test的div,我们要实现点击页面其它地方隐藏该div: <div id="test" style="margin:100px;background-color:#3e3;width:100px;height:100px;"> <

[转]JQuery控制div外点击隐藏，div内点击不会隐藏

一直弄清楚这个效果如何实现,看了这篇博客的几行代码原来如此简单. 比如有个div其id为body,实现在div外点击隐藏,div内点击不隐藏,采用jQuery实现如下: $("#body").click(function(e) { $(this).show(); e.stopPropagation(); }); $(document).click(function(event) { $("#body").hide(); }); 如果div内点击隐藏,可采用jQuer

React 点击按钮显示div与隐藏div，并给div传children

最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {render} from 'react-dom'; export default class FilterButton extends Component{ constructor(props){ super(props); this.state = { clickProps:{ display: 'n

JQuery控制div外点击隐藏，div内点击不会隐藏

比如有个div其id为body,实现在div外点击隐藏,div内点击不隐藏,采用jQuery实现如下: $("#body").click(function(e) { $(this).show(); e.stopPropagation(); }); $(document).click(function(event) { $("#body").hide(); }); 如果div内点击隐藏,可采用jQuery的触发事件 $(document).trigger("

jquery实现点击页面其他地方隐藏指定元素

jquery实现点击页面其他地方隐藏指定元素:在很多效果中,都有这样的功能,当点击页面的其他地方时,能够隐藏一个指定的元素,例如在模拟实现的select下拉菜单效果中,当下拉菜单出现的时候,我们往往希望当点击页面其他地方的时候,能够隐藏下拉条,下面就通过一个实例单独介绍一下如何实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name=

点击区域外隐藏该区域，event.stopPropagation()

event.stopPropagation() Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event. 点击区域外隐藏该区域Example: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta content="chars