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="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
jquery点击区域显示或隐藏DIV,点击非该DIV的地方隐藏该DIV的更多相关文章
- 点击div和某些控件之外的地方隐藏div，点击div不隐藏。对象 click和document click冲突有关问题
帮朋友解决这个问题,我发现用以往想想像的方式来实现,貌似不太可行,所以从网上找了一些解决办法,进行优化,这篇比较详细,所以拿来备忘,另一方面也希望可以帮助需要的同学! 问题背景:jQuery事件问题! ...
- 第一次点击Div1显示Div2，再次点击Div1的时候又隐藏Div2
要使用Jquery来实现,记得引用Jquery库哦,代码如下: $(document).ready(function(){ $("#ck1").click(function(){ ...
- 第七篇、hitTest UITabbar中间突出按钮额外增加可点击区域
简介: 以前UITabbar使用中间有一个凸起按钮时,常常就需要用到hitTest来处理可点击的范围. 示例代码: - (UIView *)hitTest:(CGPoint)point withEve ...
- js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div
点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...
- jquery实现除指定区域外点击任何地方隐藏DIV
<!--弹出的表情选择框--> <div class="layui-input-block expression-box"> </div> &l ...
- 点击页面其它地方隐藏div所想到的jQuery的delegate
在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...
- 由点击页面其它地方隐藏div所想到的jQuery的delegate
对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件 ...
- jquery 点击按钮实现listbox的显示与隐藏，点击其他地方按钮外的地方，隐藏listbox
本来不知道如何获取服务器的控件的,这下知道可以这么做了,所以记录下来.... <asp:ImageButton ID="alltime" ImageUrl="ima ...
- js进阶 12-15 jquery如何实现点击button显示列表，点击其它位置隐藏列表
js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...
随机推荐
- 【leetcode】Sqrt(x)
题目描述: Implement int sqrt(int x). Compute and return the square root of x. 实现开根号,并且返回整数值(这个很重要,不是整数的话 ...
- C结构体中数据的内存对齐问题
转自:http://www.cnblogs.com/qwcbeyond/archive/2012/05/08/2490897.html 32位机一般默认4字节对齐(32位机机器字长4字节),64位机一 ...
- 汇编指令CLI/STI
CLI禁止中断发生STL允许中断发生 这两个指令只能在内核模式下执行,不可以在用户模式下执行:而且在内核模式下执行时,应该尽可能快的恢复中断,因为CLI会禁用硬件中断,若长时间禁止中断会影响其他动作的 ...
- C#分布式缓存Couchbase使用
目前C#业界使用得最多的 Cache 系统主要是 Memcached和 Redis. 这两个 Cache 系统可以说是比较成熟的解决方案,也是很多系统当然的选择. 一.简介 目前C#业界使用得最多的 ...
- SQLServer 维护脚本分享（09）相关文件读取
/********************[读取跟踪文件(trc)]********************/ --查看事件类型描述 SELECT tc.name,te.trace_event_id, ...
- Linux常用命令之安装VMware10中安装CentOS 6.4
笔者用过的Linux系统也就是现在主流的企业级linu系统RedHat跟CentOS,这边主要介绍下CentOS 6.4的安装 RedHat和CentOS差别不大,CentOS是一个基于RedHat ...
- POJ 2464 Brownie Points II（树状数组）
一开始还以为对于每根竖线,只要与过了任意一点的横线相交都可以呢,这样枚举两条线就要O(n^2),结果发现自己想多了... 其实是每个点画根竖线和横线就好,对于相同竖线统计(一直不包含线上点)右上左下总 ...
- JavaScript设计模式——工厂模式
工厂模式:是一种实现“工厂”概念的面上对象设计模式.实质是定义一个创建对象的接口,但是让实现这个接口的类来决定实例化哪个类.工厂方法让类的实例化推迟到子类中进行.创建一个对象常常需要复杂的过程,所以不 ...
- Android学习系列(41)--Android Studio简单使用
1. 环境 UBUNTU 14.04 + Android Studio 0.8.2 2. 安装jdk openjdk-7是一个很好的选择: sudo apt-get update sudo apt-g ...
- 让一个div在不同的显示器中永远居中
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...