Jquery 点击按钮显示和隐藏层的代码
更新时间：2011年07月25日 00:25:07 作者：
不好意思，刚刚发了一个类似的效果，发现代码比较多，而却还有一个bug，现在修正了错误，需要的朋友可以参考下。
代码：
<!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></title>
<script type="text/javascript" src="../Javascript/jquery-1.6.js"></script>
<style type="text/css">
#choice_list_district{ height:50px;}
#tab td{cursor:pointer;}
</style>
<script type="text/javascript">
$(function () {
//绑定事件处理
$("#choice_list_district a").click(function (e) {
if ($("#divObj").css("display") == "none") {
e.stopPropagation();
//设置弹出层位置
var offset = $(e.target).offset();
//设置弹出层位置在点击的下面
$("#divObj").css({ top: offset.top + $(e.target).height() + "px", left: offset.left });
$("#divObj").show();
}
else {
$("#divObj").hide();
}
});
//单击空白区域隐藏弹出层
$(document).click(function (event) { $("#divObj").hide(); });
//单击弹出层则自身隐藏
//$("#divObj").click(function (event) { $("#divObj").hide(speed) });
$("#tab tr td").click(function (event) {
$("#aaa").val($(this).html());
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="choice_list_district">
<a href="#">出来层</a>
</div><div id="divObj" style="position: absolute; width:200px; height:200px; background:blue; border:1px solid block; display:none; z-index:9999;">
<table id="tab">
<tr>
<td>aaa</td>
</tr>
<tr>
<td>bbb</td>
</tr>
</table>
</div>
<div style="position:absolute; top:200px; left:200px;">
<input type="text" id="aaa" />
</div>
</div>
</form>
</body>
</html>
复制代码 代码如下:
<!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></title>
<script type="text/javascript" src="../Javascript/jquery-1.6.js"></script>
<style type="text/css">
#choice_list_district{ height:50px;}
#tab td{cursor:pointer;}
</style>
<script type="text/javascript">
$(function () {
//绑定事件处理
$("#choice_list_district a").click(function (e) {
if ($("#divObj").css("display") == "none") {
e.stopPropagation();
//设置弹出层位置
var offset = $(e.target).offset();
//设置弹出层位置在点击的下面
$("#divObj").css({ top: offset.top + $(e.target).height() + "px", left: offset.left });
$("#divObj").show();
}
else {
$("#divObj").hide();
}
});
//单击空白区域隐藏弹出层
$(document).click(function (event) { $("#divObj").hide(); });
//单击弹出层则自身隐藏
//$("#divObj").click(function (event) { $("#divObj").hide(speed) });
$("#tab tr td").click(function (event) {
$("#aaa").val($(this).html());
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="choice_list_district">
<a href="#">出来层</a>
</div><div id="divObj" style="position: absolute; width:200px; height:200px; background:blue; border:1px solid block; display:none; z-index:9999;">
<table id="tab">
<tr>
<td>aaa</td>
</tr>
<tr>
<td>bbb</td>
</tr>
</table>
</div>
<div style="position:absolute; top:200px; left:200px;">
<input type="text" id="aaa" />
</div>
</div>
</form>
</body>
</html>
相关文章
本篇文章给大家分享了关于JQuery元素查找与操作的相关技巧和流程，对此有需要的朋友可以跟着学习参考下。2018-04-04
这篇文章主要介绍了基于jQuery插件jqzoom实现的图片放大镜效果,结合实例形式分析了jQuery插件jqzoom的使用方法与相关注意事项,需要的朋友可以参考下2017-01-01
网站开发的项目中使用Google CDN的jQuery库虽然加载速度很快,但调用本地服务器的库才可以确保万无一失,接下来介绍载入jQuery库的最佳方法,感兴趣的朋友可以研究下2012-12-12
在js中常常会用到某类似id的模糊查询，可以使用jquery工具和模糊查询"^",来实现。下面用另个例子说明2013-03-03
这篇文章主要介绍了jQuery动态生成的元素绑定事件操作,结合实例形式分析了jQuery事件绑定的原理及动态生成的元素绑定事件相关操作技巧,需要的朋友可以参考下2019-05-05
如何没有任何一个库可以满足所有的需求，可以使用JQuery库提供的扩展功能，下面有个示例，大家可以看看2014-09-09
这篇文章主要为大家详细介绍了jquery Banner轮播选项卡效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了jQuery中prevUntil()方法用法,实例分析了按条件查找匹配元素之前所有的同辈元素的使用技巧,需要的朋友可以参考下2015-01-01
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
实现弹出遮罩层的方法有很多种，接下来本文给大家介绍通过jquery操作dom实现弹出页面遮罩层以及web端和移动阻止遮罩层的滑动，对页面弹出遮罩层的相关知识感兴趣的朋友一起看看吧2016-08-08
用一个绝对定位的div作为动画滑块,改变它的left属性来呈现动画效果javascript：hover()触发移动鼠标到导航nav的动作，和移出导航nav的动作2013-05-05
最新评论