根据输入和位置属性显示div与jQuery

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'>

在我的代码中，输入时会显示div，如果不输入则隐藏它，在设置position: absolute, bottom: 20px;之前链接是可点击的并且不会消失，但现在它不会

Answer 1

1不确定为什么你需要焦点，但你可以做的是添加一个小延迟（50ms）来隐藏东西，这样当你点击链接时你得到了一个小窗口：

setTimeout(function() {
   $('#div').hide();
}, 50);

＆＃13;

＆＃13;

$(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() {
    setTimeout(function() {
      $('#div').hide();
    }, 50);
  });

});

＆＃13;

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

＆＃13;

<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'>

＆＃13;

＆＃13;

＆＃13;