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

 

 

根据去哪儿（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>

 

 

posted @ 2011-10-29 17:35  porschev  阅读(1899)  评论(0)  编辑  收藏  举报

回到顶部