在页面中的任意位置单击时隐藏输入文本

Question

当用户单击链接时，显示输入文本。但是，如何在用户点击页面中的任何位置时隐藏输入文本（无需再次点击链接来隐藏它）？

下面是使用

<a href="#" onclick="return showOrHide('menulink');">click to show or hide menu</a> 
    <ul id="menulink"> 
    <li><input type="text" /></li> 

    </ul> 

Answer 1

试试这个简单的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>

Answer 2

试试这个我的代码

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> 

Source here