當用戶單擊鏈接時,顯示輸入文本。但是,如何在用戶點擊頁面中的任何位置時隱藏輸入文本(無需再次點擊鏈接來隱藏它)?在頁面中的任意位置單擊時隱藏輸入文本
下面是使用
<a href="#" onclick="return showOrHide('menulink');">click to show or hide menu</a>
<ul id="menulink">
<li><input type="text" /></li>
</ul>
當用戶單擊鏈接時,顯示輸入文本。但是,如何在用戶點擊頁面中的任何位置時隱藏輸入文本(無需再次點擊鏈接來隱藏它)?在頁面中的任意位置單擊時隱藏輸入文本
下面是使用
<a href="#" onclick="return showOrHide('menulink');">click to show or hide menu</a>
<ul id="menulink">
<li><input type="text" /></li>
</ul>
試試這個簡單的JS版本
function toggle(objID,show) {
var obj = document.getElementById(objID);
obj.style.display=show?"block":"none";
}
window.onload=function() {
document.getElementById("link").onclick=function() {
toggle("menulink",true);
return false;
}
document.getElementById("menulink").onclick=function(e) {
var event = e?e:event;
event.stopPropagation(); // be careful here.
}
document.onclick=function(e) {
var event = e?e:event;
var target = e.target?e.target:e.srcElement;
if (target.id !="link" &&
target.id != "menulink") toggle("menulink",false);
}
}
#menulink { display:none }
<a href="#" id="link">click to show or hide menu</a>
<ul id="menulink">
<li><input type="text" /></li>
</ul>
如果您有jQuery的,那將是文檔
$(function(){
$("#link").on("click",function(e) {
e.preventDefault()
$("#menulink").toggle(true);
});
$("#menulink").on("click",function(e) {
e.stopPropagation(); // watch out here...
});
$(document).on("click",function(e) {
if (e.target.id!="link") $("#menulink").toggle(false);
});
});
#menulink { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" id="link">click to show or hide menu</a>
<ul id="menulink">
<li><input type="text" /></li>
</ul>
試試這個我的代碼
function showOrHide(zap) {
if (document.getElementById) {
var abra = document.getElementById(zap).style;
if (abra.display == "block") {
abra.display = "none";
} else {
abra.display = "block";
}
return false;
} else {
return true;
}
}
:
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).mouseup(function (e)
{
var container = $("#menulink input[type=text]");
if (!container.is(e.target)
&& container.has(e.target).length === 0)
{
$("#menulink input[type=text]").hide();
}
});
<script>
發表您的答案以及,以便OP可以學習更多。** [此源代碼](http://stackoverflow.com/a/7385673/4365626)** –
對不起,更新..: ) –
jQuery沒有被標記 – mplungjan
點擊可以隱藏輸入文本。 – Amit
也真的不需要測試document.getElementById,除非你想支持IE4 – mplungjan
艾米特,你能舉個例子嗎?謝謝 – Joe