您的位置：首页 > 其它

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

2011-10-29 17:35 197 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航