jquery - 使用 jQuery 根据输入和位置属性显示 div

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

第一个不确定你为什么需要 focusout，但你可以做的是添加一个小的延迟(50 毫秒)来隐藏东西，这样当你点击链接时你会看到小窗口:

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

$(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);
  });

});

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