jQuery focusout异常

Question

我需要jQuery的帮助。我有输入，在那里我有子菜单。如果输入是活动的，子菜单是可见的，并且在我将焦点放在输入的位置时，菜单应该显示无。它工作得很好，但我有子菜单链接，这是不起作用的，因为它们在执行操作之前就消失了。

<div class="searchBeer col-100">
<input id="beerName" type="text" class="col-95">
<a href="#" class="searchbtn col-5"><i class="fa fa-search"></i></a>
</div>
<ul id="autocomplete" class="col-100" style="display: none;">
<li class="row"><a href="#" class="col-100">Plzen</a></li>
<li class="row"><a href="#" class="col-100">Plzen</a></li>
</ul>

Javascript：

$$('#beerName').focus(function () {
    $('.searchBeer').addClass('input-active');
    $('#autocomplete').show();
});
$$('#autocomplete a').click(function () {
    alert($(this).text());
});

$$('#beerName').focusout(function () {

    $('.searchBeer').removeClass('input-active');
    $('#autocomplete').hide();
});

你能帮帮我吗?

Answer 1

您可以使用mouseover event执行此操作。FIDDLE

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="searchBeer col-100">
<input id="beerName" type="text" class="col-95">
<a href="#" class="searchbtn col-5"><i class="fa fa-search"></i></a>
</div>
<ul id="autocomplete" class="col-100" style="display: none;">
<li class="row"><a href="#" class="col-100">Plzen</a></li>
<li class="row"><a href="#" class="col-100">Plzen</a></li>
</ul>
<script>

$('#beerName').focus(function () {
    $('.searchBeer').addClass('input-active');
    $('#autocomplete').show();
});
$('#autocomplete a').on("mouseover",function (e) {  
    alert($(this).text());
 $('.searchBeer').removeClass('input-active');//if not required remove this and the below line
    $('#autocomplete').hide();
});

$('#beerName').focusout(function () {
    $('.searchBeer').removeClass('input-active');
    $('#autocomplete').hide();
});



</script>