Question

Here是问题的答案，感谢@ CumminUp07

我发现这个link很有用，除了我不希望建议div在建议div中选择元素后消失，以便稍后选择更多建议。我试图用slideUp（）和slideDown（）jquery函数来实现这个策略，但是当然没有show（）和hide（）jquery函数那么快，并且尝试加速滑动函数最终会停止建议div再次出现。这是我目前所坚持的plunker：

＆＃13;

$('#search').focus(function() {
  $('#suggestions').slideDown();
});

$('#search').blur(function() {
  $('#suggestions').slideUp();
});

$('#suggestions div').click(function() {
  $('#search').val($(this).html());
  $('#suggestions').slideDown();
  $('#search').focus();
});

＆＃13;

#search,
#suggestions {
  width: 200px;
}

#suggestions {
  display: none;
  border: 1px solid gray;
  border-top: none;
}

#suggestions div:hover {
  background-color: #99CCFF;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" value="" />
<br />
<div id="suggestions">
  <div>Toronto</div>
  <div>Seattle</div>
  <div>Dallas</div>
</div>

＆＃13;

我不相信这是Action on blur except when specific element clicked with jQuery的重复，因为超时对我想要的功能不够好，也不允许你确保我可以点击两个不同的div同时保留其中一个两个div打开，直到选择文档中的其他对象。

Answer 1

您可以停止完成动画，然后只显示建议

$('#search').focus(function() {
    $('#suggestions').slideDown();
});

$('#search').blur(function() {
        $('#suggestions').slideUp();
});

$('#suggestions div').click( function() {
    $('#suggestions').stop(true,true).show();
    $('#search').focus();
    $('#search').val($(this).html());

});

Answer 2

也许它会帮助你

$('#search').focus(function() {
  $('#suggestions').slideDown();
});

$('#search').blur(function() {
  $('#suggestions').slideUp();
});

$('#suggestions div').click(function() {
  $('#search').val($(this).html());
  $('#search').blur();
});

https://jsfiddle.net/vc15r7qb/

切换两个分区和网页之间的焦点

2 个答案: