Jquery 點(diǎn)擊按鈕顯示和隱藏層的代碼
更新時(shí)間：2011年07月25日 00:25:07 作者：
不好意思，剛剛發(fā)了一個(gè)類(lèi)似的效果，發(fā)現(xiàn)代碼比較多，而卻還有一個(gè)bug，現(xiàn)在修正了錯(cuò)誤，需要的朋友可以參考下。
代碼：
<!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="#">出來(lái)層</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="#">出來(lái)層</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實(shí)現(xiàn)顯示和隱藏的4種簡(jiǎn)單方式
- JQuery顯示、隱藏div的幾種方法簡(jiǎn)明總結(jié)
- jQuery控制TR顯示隱藏的幾種方法
- jquery顯示隱藏input對(duì)象
- JQuery顯示隱藏頁(yè)面元素的方法總結(jié)
- jQuery的顯示和隱藏方法與css隱藏的樣式對(duì)比
- jquery通過(guò)visible來(lái)判斷標(biāo)簽是否顯示或隱藏
- Jquery實(shí)現(xiàn)控件的隱藏和顯示實(shí)例
- jQuery控制元素顯示、隱藏、切換、滑動(dòng)的方法總結(jié)
- jquery實(shí)現(xiàn)點(diǎn)擊按鈕顯示與隱藏效果
相關(guān)文章
本篇文章給大家分享了關(guān)于JQuery元素查找與操作的相關(guān)技巧和流程，對(duì)此有需要的朋友可以跟著學(xué)習(xí)參考下。2018-04-04
基于jQuery插件jqzoom實(shí)現(xiàn)的圖片放大鏡效果示例
這篇文章主要介紹了基于jQuery插件jqzoom實(shí)現(xiàn)的圖片放大鏡效果,結(jié)合實(shí)例形式分析了jQuery插件jqzoom的使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-01-01
載入jQuery庫(kù)的最佳方法詳細(xì)說(shuō)明及實(shí)現(xiàn)代碼
網(wǎng)站開(kāi)發(fā)的項(xiàng)目中使用Google CDN的jQuery庫(kù)雖然加載速度很快,但調(diào)用本地服務(wù)器的庫(kù)才可以確保萬(wàn)無(wú)一失,接下來(lái)介紹載入jQuery庫(kù)的最佳方法,感興趣的朋友可以研究下2012-12-12
jQuery實(shí)現(xiàn)id模糊查詢(xún)的小例子
在js中常常會(huì)用到某類(lèi)似id的模糊查詢(xún)，可以使用jquery工具和模糊查詢(xún)"^",來(lái)實(shí)現(xiàn)。下面用另個(gè)例子說(shuō)明2013-03-03
jQuery動(dòng)態(tài)生成的元素綁定事件操作實(shí)例分析
這篇文章主要介紹了jQuery動(dòng)態(tài)生成的元素綁定事件操作,結(jié)合實(shí)例形式分析了jQuery事件綁定的原理及動(dòng)態(tài)生成的元素綁定事件相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
使用JQuery庫(kù)提供的擴(kuò)展功能實(shí)現(xiàn)自定義方法
如何沒(méi)有任何一個(gè)庫(kù)可以滿(mǎn)足所有的需求，可以使用JQuery庫(kù)提供的擴(kuò)展功能，下面有個(gè)示例，大家可以看看2014-09-09
這篇文章主要為大家詳細(xì)介紹了jquery Banner輪播選項(xiàng)卡效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了jQuery中prevUntil()方法用法,實(shí)例分析了按條件查找匹配元素之前所有的同輩元素的使用技巧,需要的朋友可以參考下2015-01-01
jQuery操作dom實(shí)現(xiàn)彈出頁(yè)面遮罩層(web端和移動(dòng)端阻止遮罩層的滑動(dòng))
實(shí)現(xiàn)彈出遮罩層的方法有很多種，接下來(lái)本文給大家介紹通過(guò)jquery操作dom實(shí)現(xiàn)彈出頁(yè)面遮罩層以及web端和移動(dòng)阻止遮罩層的滑動(dòng)，對(duì)頁(yè)面彈出遮罩層的相關(guān)知識(shí)感興趣的朋友一起看看吧2016-08-08
jQuery彈性滑動(dòng)導(dǎo)航菜單實(shí)現(xiàn)思路及代碼
用一個(gè)絕對(duì)定位的div作為動(dòng)畫(huà)滑塊,改變它的left屬性來(lái)呈現(xiàn)動(dòng)畫(huà)效果javascript：hover()觸發(fā)移動(dòng)鼠標(biāo)到導(dǎo)航nav的動(dòng)作，和移出導(dǎo)航nav的動(dòng)作2013-05-05