如果我点击它，显示一个 div 并保持它 show()

Question

$(document).ready(function() {
  $('#input').focusin(function() {
    if ($(this).val() != '') {
      $('#div').show();
    } else {
      $('#div').hide();
    }
    $('#input').keyup(function() {
      // If not empty value, show div
      if ($(this).val() != '') {
        $('#div').show();
      } else {
        $('#div').hide();
      }    
    });
  });
  $('#input').focusout(function() {
    $('#div').hide();

  });

});

#div {
  display: none;
  position: absolute;
  bottom: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>
  <a href='website.com'>Link From AJAX<a>
  <a href='website.com'>Link From AJAX<a>
  <a href='website.com'>Link From AJAX<a>
</div>
<input id='input' type='text'>

在这个 jquery 代码中，#div 显示当我在#input 中输入内容时，但如果我尝试点击#div，它就会消失并且链接不起作用，

如果我只点击#div 或#input，我如何保持#div 显示，但外面的任何东西都会像往常一样隐藏它？

问题是由于CSS 中的position: absolute; bottom 20px 行引起的。

更新了代码，在.focusin function之后添加if语句后突然按预期工作，对于之前的错误解决方案，删除CSS中的position and bottom

Answer 1

当你模糊输入时，检查当前活动元素是否是 DIV，如果不是则隐藏它。

另外，如果你要绝对定位一个元素，你需要给它一个 z-index 以便你可以点击它。否则，点击将发送到该位置的正常定位元素。

$(document).ready(function() {
  $('#input').focus(function() {
    if ($(this).val() != '') {
      $('#div').show();
    } else {
      $('#div').hide();
    }
  }).blur(function() {
    if (!$("#div").is(":focus,:active")) {
      $("#div").hide();
    }
  });
  $('#input').keyup(function() {
    // If not empty value, show div
    if ($(this).val() != '') {
      $('#div').show();
    } else {
      $('#div').hide();
    }
    var search = $('#input').val();
    $.post('search.php', {
      search: search
    }, function(data) {
      $('#div').html(data);
    });
  });
});

#div {
  display: none;
  position: absolute;
  bottom: 20px;
  z-index: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>
  <a href='www.someplace.com'>HellWorld</a>
</div>
<input id='input' type='text'>

Answer 2

您可以通过使用标志来禁用focusout 处理程序的效果：

var noHide = false;
$(document).ready(function() {
  $('#input').keyup(function() {
    // If not empty value, show div
    if ($(this).val() != '') {
      $('#div').show();
    } else {
      $('#div').hide();
    }
  });
  $('#div a').hover(
    function() { noHide = true; },
    function() { noHide = false; $('#input').focus(); }
  );
  $('#input').focusout(function() {
    if(!noHide) {
      $('#div').hide();
    }
  });
});

#div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>
   <a href='#'>HellWorld</a>
</div>
<input id='input' type='text'>