在製作專案的時候,常會有點擊A元素的時候需要顯示B元素,
在點擊空白地方時(非A元素範圍)需要隱藏B元素
已下做個簡單的範例操作。
在點擊空白地方時(非A元素範圍)需要隱藏B元素
已下做個簡單的範例操作。
<!DOCTYPE html>
<html>
<head>
<title>closest demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function () {
//focus input & show content
$("#txt_focus").focus(function(){
$("#content").show();
});
//html dom clik
$('html').click(function (event) {
//指定 "#txt_focus,#content" 是否有被點擊;
//如 user 點擊範圍在"#txt_focus,#content" 不做隱藏 反之 點擊其他元素上便會隱藏
if ($(event.target).closest("#txt_focus,#content").length==0) {
$("#content").hide();
}
});
});
</script>
</head>
<body>
<div>
<lable>focus it:</lable>
<input type="text" name="txt_focus" id="txt_focus" placeholder="目的地">
<div id="content" style="width:250px;height:150px;background-color:#387bbe;display:none;">點擊此區域 也不會隱藏喔!<br/>點擊空白地方隱藏!!</div>
</div>
</body>
</html>
沒有留言:
張貼留言