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

最新推荐文章于 2024-11-17 21:03:46 发布
最新推荐文章于 2024-11-17 21:03:46 发布
阅读量97 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/tnnyang/p/4561325.html
版权 
<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

转载于:https://www.cnblogs.com/tnnyang/p/4561325.html

weixin_34242819
关注
jQuery判断当前点击位置是否非指定元素区域
if_you_can_please_do的博客
05-27 9953
“` $(document).click(function(e){ var spanDatebox = $('#date').next('.datebox'); var idValue = $(e.target).attr("id"); //获取当前点击区域对象的id值 if(idValue == "dateLabel"){
jQuery 实现点击页面其他地方隐藏菜单
weixin_30615767的博客
04-18 171
点击页面其它地方隐藏id为messageList的div 代码： $('body').delegate("#message", 'click', function(e) { var e=window.event||e; //消除浏览器差异 if (!$(e.target).closest(".messageList").length) { $(".messageLis...
jquery 点击元素以外任意地方隐藏该元素的方法
周家大小姐
08-29 3717
假设对象的id为divBtn，则代码如下,但不支持IE8：  $('body').bind('click', function(event) { // IE支持 event.srcElement ， FF支持 event.target var evt = event.srcElement ? event.srcElement : event.target; ...
JQuery：除指定区域外点击任何地方隐藏DIV
热门推荐
cc蒲公英的博客
02-08 2万+
$('body').click(function(e) { var target = $(e.target); // 如果#overlay或者#btn下面还有子元素，可使用 // !target.is('#btn *') && !target.is('#overlay *') if(!target.is('#btn') && !target.is('#overlay'
jq 如何让点击其他地方隐藏_jQuery除指定区域外点击任何地方隐藏DIV功能
weixin_31100705的博客
12-29 1674
具体代码如下所示：$('body').click(function(e) {var target = $(e.target);// 如果#overlay或者#btn下面还有子元素，可使用// !target.is('#btn *') && !target.is('#overlay *')if(!target.is('#btn') && !target.is('#ov...
点击div外区域隐藏div操作(嵌套iframe页面)
阿毛的博客
01-10 4972
一、正常页面 $(document).click(function(){ $(dom).hide();//要隐藏的div }); 二、嵌套iframe页面 （我实现的是点击子页面隐藏父页面的元素） 除了写正常页面的操作之外，也需要在子页面里面写第二个操作 $(document).click(function(){//父页面 $(dom).hide();/...
点击按钮显示或隐藏Div块
GRAY_KEY的博客
06-24 1万+
通过点击按钮实现Div块在显示状态与隐藏状态之间来回切换。代码如下：方法一：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;         &lt;script src="/jquery/jquery-1.11.1.min.js"&gt;&lt;/script&gt;         &lt;script type="text/javascri
html点击隐藏divjq,jquery点击a标签怎么显示和隐藏div?详解
weixin_42168902的博客
06-03 1857
你知道jquery点击a标签要如何才能够显示以及隐藏div吗?下面的文章要给大家讲解的就是这个方面的内容哦，一起来看看吧。1、新建一个html文件，命名test.html，用来讲解jquery点击a标签怎么显示和隐藏div。2、在test.html文件当中，使用div标签创建一个模块，并且，设置div的class属性为aa。主要用于通过这个class来设置css样式和获得div对象。3、在test...
jQuery除指定区域外点击任何地方隐藏DIV功能
10-19
在上述内容中，介绍的jQuery功能是点击除指定区域外的任何地方隐藏DIV。这涉及到jQuery中的点击事件处理。在jQuery中，我们可以通过绑定事件处理器来处理点击事件。例如，$(document).click(function(){...})就是将...
JQuery实现点击div以外的位置隐藏该div窗口
10-26
具体的实现方法是在jQuery的ready事件中监听整个文档的点击事件，当触发点击事件后，通过事件对象获取当前的点击目标元素，再检查该目标元素是否是需要隐藏的div元素的子元素。如果不是，则执行隐藏操作。 知识点二...
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
10-23
标题中提到的关键知识点是使用jQuery实现点击页面其他区域来隐藏下拉div和遮罩层的功能。描述部分则强调了此技术在改善用户体验方面的应用，并指出这是通过响应鼠标事件来动态改变页面元素样式的技术实现。标签部分...
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
10-24
本文讲述的是如何利用JQuery实现一个特定的功能：当用户点击div外部时，div会被隐藏；而当用户在div内部点击时，div则不会隐藏。为了达到这一目的，本文涉及了JQuery中的几个核心方法，它们包括show、hide以及...
如何编译 Cesium 源码
ismartcube的博客
11-13 1136
通过以上步骤，您可以成功地从 GitHub 上下载 Cesium 源代码并在本地进行编译。对于开发人员来说，编译 Cesium 源码有助于定制功能，或者调试某些问题。如果您只是想使用 Cesium 进行开发，而不需要编译源代码，您也可以直接从 CDN 或下载预构建版本进行使用。编译的 Cesium 版本可以直接在您的应用中引用，或者部署到 Web 服务器上，供其他用户访问。提供一个高效、兼容、优化的数据转换工具，一站式完成数据转换、数据发布、数据预览操作。
从零开始快速构建Vue3项目
欧唯薇
11-13 894
是目前最推荐的方式来创建 Vue 3 项目，因为它速度快，配置简洁，并且是 Vue 3 的官方推荐工具。打开浏览器并访问 `http://localhost:5173`，你将看到一个基本的 Vue 3 应用程序运行。1、若需要使用不同版本node（兼容新旧项目环境），则需要使用nvm来进行node多版本管理，下载并安装。2、若出现某个依赖安装报错，可以npm install --ignore-scripts，最后再来单独安装报错的依赖。
【Node.js】Node.js 和浏览器之间的差异
佚名程序员
11-16 858
Node.js 是一个基于 Chrome V8 引擎构建的开源 JavaScript 运行时，它使开发者能够在服务端运行 JavaScript 代码。Node.js 提供了高效的事件驱动和非阻塞 I/O 模型，广泛应用于构建快速、可扩展的网络应用。核心特性单线程：使用事件循环机制实现并发。非阻塞 I/O：适合高并发应用。模块化：采用 CommonJS 模块系统。浏览器是前端开发的主要运行环境。其核心任务是解析 HTML、CSS 和 JavaScript，并呈现网页内容。
Vue常用加密方式
m0_51431448的博客
11-13 161
消息摘要是从原始数据中通过特定算法计算出的一个固定长度的字符串，这个过程通常被称为哈希函数或散列函数。固定长度：无论输入的数据有多大，输出的消息摘要都有固定的长度。唯一性：理想情况下，不同的输入应该产生不同的消息摘要，虽然在现实中由于哈希碰撞的存在，这并不总是可能的。不可逆性：从消息摘要不能反推出原始数据。高效性：计算消息摘要的过程应该是快速且高效的。
React中事件绑定和Vue有什么区别？
最新发布
m0_75074819的博客
11-17 221
React使用事件代理（Event Delegation）技术，将所有事件监听器绑定到document上，而不是直接绑定到具体的DOM元素上。：React将所有原生DOM事件封装成合成事件，通过统一的接口暴露给开发者。：Vue提供了丰富的事件修饰符（如.stop、.prevent等），方便开发者处理复杂的事件逻辑。如果你在类组件中使用事件处理函数，通常需要显式绑定 this，或者使用箭头函数来自动绑定。：Vue通过指令（如v-on）来绑定事件，指令内部会处理事件的监听和分发。因此，不需要额外的绑定。
Nuxt2和Nuxt3 对于SEO优化的区别
书山有路_邓
11-14 567
nuxt
点击按钮显示或隐藏Div块不用jquery
09-29
要实现点击按钮显示或隐藏Div块的功能，但不使用jQuery，可以利用JavaScript的原生DOM操作。下面是一个简单的示例： HTML部分： ```html 点击切换 <div id="content" style="display:none;">这是Div内容</div> ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值