Jquery 点击按钮显示和隐藏层的代码_Javascript教程-查字典教程网
Jquery 点击按钮显示和隐藏层的代码
Jquery 点击按钮显示和隐藏层的代码
发布时间:2016-12-30 来源:查字典编辑
摘要:代码:复制代码代码如下:#choice_list_district{height:50px;}#tabtd{cursor:pointer;}...

代码:

复制代码 代码如下:

<!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">

<table id="tab">

<tr>

<td>aaa</td>

</tr>

<tr>

<td>bbb</td>

</tr>

</table>

</div>

<div>

<input type="text" id="aaa" />

</div>

</div>

</form>

</body>

</html>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类