Question

我正在制作关于搜索的ajax建议，其中，将显示一个建议框

<div id="searchbox">
    <input type="text" name="search" class="searchinput"/>
</div>

<div id="sugbox">
 ......
 <a href="product.php?id=2" >Item 1</a>
 .....
</div>

和 Javascript

$('#searchbox .searchinput').focus(
 function () {
    $('#searchbox #sugbox').show();
 });

 $('#searchbox .searchinput').focusout(
 function () {
    $('#searchbox #sugbox').hide();
 });

如果搜索文本框#searchbox .searchinput为focus，则会打开建议框，如果focusout则隐藏。问题：每当我点击建议框中的链接时，建议框都会隐藏（因为输入焦点事件）。

如何检查目标div是否为建议框，因此不要隐藏该框前..

 $('#searchbox .searchinput').focusout(
 function () {
    if(target div is not sugbox)
        $('#searchbox #sugbox').hide();
 });

Answer 1

尝试在悬停类

中为sugbox分配一个类

 $(".searchinput").focus(function(){
   $("#sugbox").show();
});
$(".searchinput").focusout(function(){
   if(!$("#sugbox").hasClass("hovered"))
   $("#sugbox").hide();
});
 $("#sugbox").hover(function(){
   $(this).addClass("hovered");
},function(){
   $(this).removeClass("hovered");
 });

这里是jsfiddle的例子：http://jsfiddle.net/kyawlay/9wg49L2b/5

Answer 2

在框中添加一个mousedown处理程序（在我认为的焦点/模糊之前触发），单击时将标志设置为true，然后在隐藏之前检查此标志

var boxClicked = false;
$('#mainsearch .searchinput').mousedown(// listen click handler
 function () {   boxClicked = true;});
$(document).mousedown(// reset boxclicked
 function () {   boxClicked = false;});

$('#searchbox .searchinput').focus(
 function () {
    $('#searchbox #sugbox').show();
 });

 $('#mainsearch .searchinput').focusout(
 function () {
    if(!boxClicked)   $('#mainsearch #sugbox').hide();// add condition
 });

Answer 3

您使用了错误的选择器。查看此演示。 http://jsfiddle.net/m711LLwr/

$('#searchbox #sugbox').show();

应该是

$('#mainsearch #sugbox').show();

Answer 4

尝试这一点，它的作用是当searchinput失去焦点时，如果sugbox没有类＆＃39; NoHide＆＃39;，则隐藏它。在on click事件上，如果点击目标不是searchinput而不是sugbox而不是sugbox锚，则NoHide类被分配给sugbox。

如果事件目标不在上述3个选择器中，则删除NoHide类。我有一个小提琴，但我希望你尝试在你的页面，因为小提琴会混淆你（因为它有iframe和小提琴的身体区域有限）。

$('#searchbox .searchinput').focus(
 function () {

    $('#sugbox').show();
 });

 $('#searchbox .searchinput').focusout(
 function (event) {
        if(!$('#sugbox').hasClass('NoHide'))
        $('#sugbox').hide();
 });

$('body').on('click',
 function (event) {

    if(!$(event.target).is(".searchinput") && !$(event.target).is("#sugbox a") &&  !$(event.target).is("#sugbox")){
        $("#sugbox").hide().removeClass('NoHide');
    }else
    {
      $("#sugbox").show().addClass('NoHide');
    }
 });

jquery输入字段焦点除了div

4 个答案: