Jquery 點(diǎn)擊按鈕顯示和隱藏層的代碼
更新時間：2011年07月25日 00:25:07 作者：
不好意思，剛剛發(fā)了一個類似的效果，發(fā)現(xiàn)代碼比較多，而卻還有一個bug，現(xiàn)在修正了錯誤，需要的朋友可以參考下。
代碼：
<!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();
//設(shè)置彈出層位置
var offset = $(e.target).offset();
//設(shè)置彈出層位置在點(diǎn)擊的下面
$("#divObj").css({ top: offset.top + $(e.target).height() + "px", left: offset.left });
$("#divObj").show();
}
else {
$("#divObj").hide();
}
});
//單擊空白區(qū)域隱藏彈出層
$(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>
復(fù)制代碼 代碼如下:
<!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();
//設(shè)置彈出層位置
var offset = $(e.target).offset();
//設(shè)置彈出層位置在點(diǎn)擊的下面
$("#divObj").css({ top: offset.top + $(e.target).height() + "px", left: offset.left });
$("#divObj").show();
}
else {
$("#divObj").hide();
}
});
//單擊空白區(qū)域隱藏彈出層
$(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>
相關(guān)文章
基于jQuery創(chuàng)建鼠標(biāo)懸停效果的方法
這篇文章主要介紹了基于jQuery創(chuàng)建鼠標(biāo)懸停效果的方法,實(shí)例分析了jQuery實(shí)現(xiàn)鼠標(biāo)特效的原理與詳細(xì)步驟,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
jQuery插件form-validation-engine正則表達(dá)式操作示例
這篇文章主要介紹了jQuery插件form-validation-engine正則表達(dá)式操作,結(jié)合實(shí)例形式分析了jQuery插件form-validation-engine進(jìn)行正則驗(yàn)證操作的相關(guān)技巧,需要的朋友可以參考下2017-02-02
基于jQuery實(shí)現(xiàn)中英文切換導(dǎo)航條效果
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)中英文切換導(dǎo)航條效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
一個基于Jquery的簡單&簡陋Tabs插件，學(xué)習(xí)的朋友可以參考下。2010-02-02
jquery1.10去除了.live()方法，新增了一個.on()方法來給元素綁定事件，下面有個不錯的示例，大家可以參考下2014-03-03
在jquery中綁定事件我們可以使用click、change、mouseout、.bind(),live等待事件來操作，下面我來給大家介紹jQuery使用向DOM元素綁定事件實(shí)現(xiàn)程序相關(guān)實(shí)例，有需要了解的同不可進(jìn)入?yún)⒖肌?/div> 2015-04-04
這篇文章主要為大家詳細(xì)介紹了jQuery用戶頭像裁剪插件cropbox.js的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
『jQuery』取指定url格式及分割函數(shù)應(yīng)用
使用jQuery取指定url格式，并使用alert彈出，感興趣的朋友可以參考下哈，希望對你有所幫助2013-04-04
用jquery來判斷瀏覽器類型，如果只是僅僅為了判斷瀏覽器的類型而使用該方法,那么不建議使用，只是在你已經(jīng)使用了jquery才建議使用，因?yàn)闆]必要因?yàn)檫@么小的一個功能就加載那么大的類庫吧2012-11-11
jQuery取得元素標(biāo)簽名稱小結(jié)（附代碼）
這篇文章主要介紹了 jquery如何取得元素標(biāo)簽名稱，將html和js代碼附上，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-08最新評論