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活动执行此操作。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>

jQuery焦点异常

1 个答案: