鼠标点击层以外的地方层隐藏
鼠标点击层以外的地方层隐藏
Porschev
发布于 2018-01-16 11:16:48
发布于 2018-01-16 11:16:48
根据去哪儿（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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2011-10-29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读