鼠标点击层以外的地方层隐藏

根据去哪儿（http://www.qunar.com/）输入框点击按钮而写

实现功能效果：

1、点击按钮，相应层显示，点击层以外的部分层隐藏;

2、重复点击按钮时，按钮附属层显示时变隐藏，反之亦然;

3、如果一个页面上有两个以上这种效果，层会有互斥效果;

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>

<!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 runat="server">    <title>Porschev----鼠标点击层以外的地方层隐藏</title>

    <script src="jquery-1.3.2-vsdoc.js" src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>

    <script type="text/javascript">        $(function() {            $("div[name='divClick']").click(function() {var showDiv = $(this).next();     //得到层对象                var divName = showDiv.attr('name');   //得到这个层的name                if (showDiv.is(":hidden")) {     //判断层是否隐藏                    $("div[name='" + divName + "']").hide();                        showDiv.show();              //true：显示                    $('body').one('click', function() {    //给BODY绑定一次性点击事件                        showDiv.hide();                    //点击BODY显示层                    });return false;                           //返回                }else {                    showDiv.hide();                   //false:显示层                    $('body').one('click', function() {    //给BODY绑定一次性点击事件                        showDiv.hide();                    //点击BODY显示层                    });return false;                           //返回                                }            });

            $("div[name='cont']").click(function() {     //点击显示部分不隐藏                return false;            });        });

</script></head><body>    <form id="form1" runat="server">           <div style="width:995px;height:900px">         <div name="divClick" style="color:#000000;font-weight:bold;cursor:pointer;">打开</div>        <div name="cont" style="width:200px;height:100px;background:#0000CC;color:#FFFFFF;display:none;">中国</div>          <div name="divClick" style="color:#000000;font-weight:bold;cursor:pointer;">打开</div>        <div name="cont" style="width:200px;height:100px;background:#0000CC;color:#FFFFFF;display:none;">中国</div>                                                                                                                                                        </div>      </form>    </body></html>

鼠标点击层以外的地方层隐藏相关推荐

点击一个按钮显示div，点击div之外的地方div隐藏，点击div之内的地方div不隐藏
<input id="btnClick" type="button" value="原生写法" class="btn-gre ...
JS点击DIV以外的地方，隐藏DIV
document.onclick = function (event) { var e = event || window.event; var elem = e.srcElement||e.targ ...
html5鼠标点击弹出层,jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
本文实例讲述了jQuery实现单击弹出Div层窗口效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现 ...
Jquery 点击图片在弹出层显示大图
[转]Jquery 点击图片在弹出层显示大图使用jquery, 实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片: 1.点击前的效果: 2.点击后的效果: h ...
html点击图片弹出大图特效代码,Jquery 点击图片在弹出层显示大图
使用jquery,实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片如下: 1.点击前的效果: 2.点击后的效果: html代码如下: 弹出层图片 Js代码如下: ...
css如何实现鼠标移至图片上显示遮罩层及文字
css如何实现鼠标移至图片上显示遮罩层及文字问题:一张图片当鼠标移动到上方时,会显示一个遮罩层,并且显示一些提示文字 html: <div class="contentimg&quo ...
鼠标悬停 -css如何实现鼠标移至图片上显示遮罩层及文字
搜索这个效果的时候,很多人都是用css结合jQuery实现的,其实直接用css也可以实现哦~ 效果前: 效果后: 代码: <!DOCTYPE html> <html lang=&qu ...
添加遮罩层，实现点击穿透，实现遮罩层按钮点击，遮罩层下层点击事件
给绝对定位的层多加一个样式:" pointer-events:none; " 这样绝对定位层下的元素就可以点击了如果在绝对定位层上存在能够点击的元素,在添加" poin ...
Unity中在鼠标点击的UI地方创建预制件+在指定地方创建预制件
目录一.目的: 1.想知道:Unity中在鼠标点击的UI地方创建预制件二.参考: 1.Unity中动态给button的OnClick添加代码 1.Unity 在代码中设置RectTransform ...

鼠标点击层以外的地方层隐藏

鼠标点击层以外的地方层隐藏相关推荐

最新文章

热门文章