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它就会消失且链接不起作用，< / p>

如果我仅点击#div或#div，我如何保持显示#input，但外面的任何内容都会将其隐藏起来？

问题的发生是因为position: absolute; bottom 20px中的CSS行。

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

中的CSS

Answer 1

您可以通过使用标志来禁用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'>

Answer 2

当您输入模糊时，检查当前活动元素是否为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'>

显示一个div并保持show（）如果我点击它

2 个答案: