Javascript jQuery焦点输出异常

我需要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>

您能帮助我吗？

您可以使用鼠标悬停事件来完成此操作

---

为什么在某些地方有双$$呢？我认为逻辑上你没有被清除。您希望在失去焦点的同时，子菜单将立即隐藏，同时您希望从子菜单中选择项吗？那个么，你们怎样才能从菜单中选择项目而不丢失输入的焦点呢。如果我调出输入，子菜单每次都会显示none。仅当我单击子菜单中的链接时，子菜单前链接的jquery警报值才会显示“无”。

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

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