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的更多相关文章
- 第一次点击Div1显示Div2，再次点击Div1的时候又隐藏Div2
要使用Jquery来实现,记得引用Jquery库哦,代码如下: $(document).ready(function(){ $("#ck1").click(function(){ ...
- 第七篇、hitTest UITabbar中间突出按钮额外增加可点击区域
简介: 以前UITabbar使用中间有一个凸起按钮时,常常就需要用到hitTest来处理可点击的范围. 示例代码: - (UIView *)hitTest:(CGPoint)point withEve ...
- 点击页面其它地方隐藏div所想到的jQuery的delegate
在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...
- 由点击页面其它地方隐藏div所想到的jQuery的delegate
对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件 ...
- jquery 点击按钮实现listbox的显示与隐藏，点击其他地方按钮外的地方，隐藏listbox
本来不知道如何获取服务器的控件的,这下知道可以这么做了,所以记录下来.... <asp:ImageButton ID="alltime" ImageUrl="ima ...
- React 点击按钮显示div与隐藏div，并给div传children
最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...
- 点击自动显示/隐藏DIV代码。(简单实用）
注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 很多时候我们需要将DIV的信息默认为隐藏状态,只有当用户点击时才显示DIV中包含的提示文字.这类效果在互联网上应用得很多,但实现的方 ...
- 点击按钮显示隐藏DIV，点击DIV外面隐藏DIV
点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...
- jquery实现点击页面其他地方隐藏指定元素
代码实例如下: <!DOCTYPE html><html><head><meta charset=" utf-8"><meta ...
随机推荐
- Python 历遍目录
Automate the Boring Stuff 学习笔记 01 使用 os 模块的 walk() 函数可以实现历遍目录的操作,该函数接收一个绝对路径字符串作为必选参数,返回三个参数: 当前目录—— ...
- 如何为编程爱好者设计一款好玩的智能硬件（三）——该选什么样的MCU呢？
一.我的构想:如何为编程爱好者设计一款好玩的智能硬件(一)——即插即用.积木化.功能重组的智能硬件模块构想 二.别人家的孩子:如何为编程爱好者设计一款好玩的智能硬件(二)——别人是如何设计硬件积木的! ...
- 【C++】类型转换（学习笔记）
1. 隐式类型转换,相关联的类型(e.g.int vs double)之间可以发生隐式类型转换. 比如,在条件中,非布尔类型转为布尔类型: 初始化时,初始值变为变量类型: 赋值时,右值变成左侧的类型: ...
- JAVA邮件发送的简单实现
JAVA MAIL是利用现有的邮件账户发送邮件的工具,比如说,我在网易注册一个邮箱账户,通过JAVA Mail的操控,我可以不亲自登录网易邮箱,让程序自动的使用网易邮箱发送邮件.这一机制被广泛的用在注 ...
- 简单的线性分类——MATLAB，python3实现
看李政轩老师讲的Kernel,讲的非常好!前面有几道作业题,用MATLAB简单做了下,不知道对不对,错误之处还请指出. 题目是这样的. 一.MATLAB版本: clear; clc % 生成train ...
- 用VB实现点名程序
用vb实现点名程序主要是随机变量的产生和数据的读取和存储以及计时器程序的设计,读取的文件命名为data.txt,书写格式为第一行为总人数下面的每行为一个人名,在应用时最好把data文件和程序文件放在一 ...
- WebView的返回功能
WebView 实现返回到最后一个 在退出 import android.app.Activity; import android.os.Bundle; import android.view.Key ...
- Cryptography加密和解密
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Se ...
- vmware在非正常关机后无法启动虚拟机
昨天使用vmware,由于笔记本温度过高,系统自动断电,导致实体机非正常关机.然后发现vmware无法启动虚拟机了,提示为‘This virtual machine appears to be in ...
- OpenJudge 取数游戏
描述 我们来玩一个游戏:自然数1到N,按顺序列成一排,你可以从中取走任意个数,但是相邻的两个不可以同时被取走.如果你能算出一共有多少种取法,那么你会被天神Lijiganjun奖励. 输入 仅包含一个数 ...