如何通过点击它来使元素消失

Question

我想进行搜索，在显示在页面上方其他元素上方的div中显示结果（如自动完成或chrome上的地址栏）。我希望结果在鼠标所在的任何地方都能保持可见，但如果用户在搜索框外部或结果本身外部点击，则会消失。我怎么能这样做？

Answer 1

在点击事件中，隐藏或完全删除它！

$(function () {
  $("div").click(function () {
    $(this).remove();
  });
});

div {width: 25%; border: 1px solid #999;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>Click Me</div>
<div>Will Remove</div>

或者，如果您想要隐藏，请添加class="hidden"：

$(function () {
  $("div").click(function () {
    $(this).addClass("hidden");
  });
});

div {width: 25%; border: 1px solid #999;}
.hidden {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>Click Me</div>
<div>Will Remove</div>

Answer 2

您正在寻找我相信的.blur()事件。 http://jsfiddle.net/d7mbbmwe/

$('#input1').blur(function() {
    $('.results').html('')
});