基于jquery点击自以外任意处，关闭自身的代码

Html:


代码如下:

<div class="down">click</div>
<div class="con hide">show-area</div>

CSS:


代码如下:

.hide{display:none;}

js:


代码如下:

$(document).ready(function(){
$("div.down").click(function(e){
e.stopPropagation();
$("div.con").removeClass("hide");
});
$(document).click(function(){
if(!$("div.con").hasClass("hide")){
$("div.con").addClass("hide");
}
});
});

赞 (0)

相关推荐

  • 基于jquery点击自以外任意处，关闭自身的代码

    Html: 复制代码 代码如下: <div class="down">click</div> <div class="con hide">show-area</div> CSS: 复制代码 代码如下: .hide{display:none;} js: 复制代码 代码如下: $(document).ready(function(){ $("div.down").click(function(e){ e

  • 基于jQuery实现仿百度首页换肤背景图片切换代码

    基于jQuery实现仿百度首页换肤背景图片切换代码

    不多说了,先给大家展示效果图,本文支持源码下载哦,需要的朋友可以直接下载使用,代码很简单哦- 在线预览    源码下载 html代码: <a href="#">换肤</a> <div class="heitiao"></div> <div class="con"><img src="images/content.png" /></div> &l

  • JQuery点击事件回到页面顶部效果的实现代码

    JQuery点击事件回到页面顶部效果的实现代码 //2个div,点击某个时回到顶部 <div style="height:1000px">111111111111111</div> <div id="top" >top</div> <引用JQuery> <script type="text/javascript"> $(function(){ $("#top&quo

  • jQuery点击导航栏选中更换样式的实现代码

    jQuery点击导航栏选中更换样式的实现代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <tit

  • 基于jquery实现select选择框内容左右移动添加删除代码分享

    基于jquery实现select选择框内容左右移动添加删除代码分享

    本文实例讲述了select选择框内容左右移动添加删除.分享给大家供大家参考.具体如下: select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动.多选移动和一键全部移动! 运行效果图:                                  ----------------------查看效果----------------------- 小提示:浏览

  • 基于jquery实现的仿优酷图片轮播特效代码

    基于jquery实现的仿优酷图片轮播特效代码

    本文为大家分享了一种常见的并且比较复杂的轮播效果,就是优酷主界面的轮播图,效果图如下: 我们在书写代码之前,先分析效果图的结构: 1. 左右两个方向按钮,可以用来切换上一张与下一张. 2. 下方有分页指示器,用来标注滚动到了第几张,当然,你点击对应的按钮,也可以跳转到对应的图片. 3. 中间主要显示区域就是用来摆放需要轮播的图片. 根据上面描述,我们首先可以书写HTML代码. 一.HTML代码 <body> <div id="youku"> <div cl

  • 基于jquery编写的横向自适应幻灯片切换特效的实例代码

    基于jquery编写的横向自适应幻灯片切换特效的实例代码

    复制代码 代码如下: <script type="text/javascript">jQuery(".fullSlide").hover(function() {    jQuery(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)},function() {    jQuery(this).find(".prev,.next&q

  • 基于jQuery实现表格数据的动态添加与统计的代码

    基于jQuery实现表格数据的动态添加与统计的代码

                                                              图(1.1)    某物流信息系统中的功能要求如图1.1所示,表格中每一行代表一笔运送货物的信息,在录入每行的计费重量和费率后,要求能按一定的公式,自动计算运送费用,并且能自动统计所有运送货物的总运费.运送货物信息的数据量(即表格的行数)不定,要求能动态增加.删除,即表格的数据行数是动态可维护的.同时为了方便操作,需要在页面中能像使用键盘的上下左右方向键,在录入的文本框之间进行切换

  • 基于jquery的让页面控件不可用的实现代码

    应用背景 当用户需要某项功能时要填写一些表单信息,在填写完成并提交后,该部分信息是不允许再次修改的.表单包含TextBox.DropDownList.CheckBox等控件. 需求实现 第一种方案,绑定用户填写的数据时,设置控件的Enable属性为False.如果页面的表单数较少时可采用这样的方法,但是如果在表单较多的情况下则并不是更好的方法. 第二种方案,使用Foreach访问页面控件,判断类型如果是TextBox.DropDownList.CheckBox等,则设置Enable=False.

  • 基于JQuery的抓取博客园首页RSS的代码

    基于JQuery的抓取博客园首页RSS的代码

    效果图:实现代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http

随机推荐