零星网络

技术&资讯
网站超市

需要前后台演示请留言,或QQ:150623477联系站长。

本成品是基于ASP+Access开发的网站内容管理系统,提供了简介类模块,新闻类模块,产品类模块,图片类模块,下载类模块
· 适用性:充分考虑公司企业的实际需要,确保功能上较强的实用性。
· 易用性:用户界面简洁、美观、友好,易于用户操作和使用,操作人员只需简单学习即可掌握。
· 安全性:安全可靠的权限划分,既考虑信息的共享,又注意信息的保护与隔离。

JQUERY 您的当前位置:首页 > 技术&资讯 > JQUERY

点击div外面该div消失

发布时间:2017-05-22  浏览次数:  分享到:

css

.main {width: 300px;height: 300px;background: red;}
.content {width: 100px;height: 100px;background: blue;}

js

$(function() {   //方法一
$("#showdiv").click(function(e) {
    if($("#test").is(":hidden")) {
        $("#test").fadeIn();
        e ? e.stopPropagation() : event.cancelBubble = true;
    }
});
$("#test").click(function(e) {
    e ? e.stopPropagation() : event.cancelBubble = true;
});
$(document).click(function() {
    $("#test").fadeOut();
});
})

$(function(){   //方法二
$("#showdiv").click(function(e){
    alert(e.target.className);
    if(e.target.className!=="content"){
        $("#test").hide();
//      $("#showdiv").hide();
    }
})
$("#test").click(function(){
    alert(1111);
    return false;  //阻止事件冒泡到父级DIV
})
})

$(function(){    //方法三
    $("#showdiv").click(function(){
         $("#test").hide();
         return false;
     })
     $("#test").click(function(){
          return false;
      })
})

html

div id="showdiv" class="main">
    div id="test" class="content">
    /div>
/div>

相关评论

    评论加载中...
    评论者:     验证码:
        

首页|网站超市|业界|营销|优化|HTML|JS|JQUERY|DIV+CSS|编程|运营|设计排版|创业|访谈

Copyright © 2006-2015 Power by 零星设计. 联系QQ:150623477
合作共赢、快速高效、优质的网站建设提供商

  • ●在线咨询点击这里给我发消息
  • ●在线咨询点击这里给我发消息
  • ●在线咨询点击这里给我发消息
  • 业务电话正在通话中…
  • 09:00AM-22:00PM
  • 高效优质的网站建设提供商
  • 加入收藏