Question

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

这是我的代码

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;
 }
}

使用

<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

试试这个：

<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

点击页面中的任意位置隐藏输入文字

2 个答案: