顯示一個div並保持它表明（），如果我在上面點擊

$(document).ready(function() { 
 
    $('#input').focusin(function() { 
 
    if ($(this).val() != '') { 
 
     $('#div').show(); 
 
    } else { 
 
     $('#div').hide(); 
 
    } 
 
    $('#input').keyup(function() { 
 
     // If not empty value, show div 
 
     if ($(this).val() != '') { 
 
     $('#div').show(); 
 
     } else { 
 
     $('#div').hide(); 
 
     }  
 
    }); 
 
    }); 
 
    $('#input').focusout(function() { 
 
    $('#div').hide(); 
 

 
    }); 
 

 
});

#div { 
 
    display: none; 
 
    position: absolute; 
 
    bottom: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='div'> 
 
    <a href='website.com'>Link From AJAX<a> 
 
    <a href='website.com'>Link From AJAX<a> 
 
    <a href='website.com'>Link From AJAX<a> 
 
</div> 
 
<input id='input' type='text'>

在此jQuery的代碼中，#div顯示當我鍵入#input裏面的東西，但如果我試圖點擊#div它會消失，鏈接不起作用，

我怎能如果我在#div單擊顯示的#div或#input只，但任何外界將其隱藏正常？

問題發生在position: absolute; bottom 20px行CSS。

更新的代碼，它突然.focusin function後擔任預期增加if語句之後，以前的錯誤的解決方案，消除在CSS

來源

2017-07-07 Calibur Victorious

這幾乎總是錯的綁定內的另一個事件處理的事件處理程序。每次焦點進入輸入時，您都會複製keyup處理程序。 – Barmar

@Barmar我解決了這個問題，因爲我在更新中說過，但是在添加'AJAX'代碼後，我遇到了同樣的問題，關於重複，我希望如果你解釋它，因爲有時如果我''focusout''輸入'和回到它，'div'似乎有一個新的價值或刷新自己，這是你的意思？如果是的話，我希望能有辦法解決這個問題。 –

不要在問題中提出解決方案，將其作爲答案發布。 – Barmar

的position and bottom你可以通過使用標誌的禁止focusout處理的效果：

var noHide = false; 
 
$(document).ready(function() { 
 
    $('#input').keyup(function() { 
 
    // If not empty value, show div 
 
    if ($(this).val() != '') { 
 
     $('#div').show(); 
 
    } else { 
 
     $('#div').hide(); 
 
    } 
 
    }); 
 
    $('#div a').hover(
 
    function() { noHide = true; }, 
 
    function() { noHide = false; $('#input').focus(); } 
 
); 
 
    $('#input').focusout(function() { 
 
    if(!noHide) { 
 
     $('#div').hide(); 
 
    } 
 
    }); 
 
});

#div { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='div'> 
 
    <a href='#'>HellWorld</a> 
 
</div> 
 
<input id='input' type='text'>

來源

2017-07-07 18:47:22 ideaboxer

您的回答對於第一個問題完美地工作，但它在添加'if'語句的同時在更新中解釋，但是現在出現了一個新問題，我希望如果您檢查它。 –

如果模糊了輸入的，檢查當前活動的元素是DIV，並隱藏它，如果它不是。另外，如果你絕對定位一個元素，你需要給它一個z-index，這樣你就可以點擊它。否則，點擊被髮送到該位置處的正常位置的元素。

$(document).ready(function() { 
 
    $('#input').focus(function() { 
 
    if ($(this).val() != '') { 
 
     $('#div').show(); 
 
    } else { 
 
     $('#div').hide(); 
 
    } 
 
    }).blur(function() { 
 
    if (!$("#div").is(":focus,:active")) { 
 
     $("#div").hide(); 
 
    } 
 
    }); 
 
    $('#input').keyup(function() { 
 
    // If not empty value, show div 
 
    if ($(this).val() != '') { 
 
     $('#div').show(); 
 
    } else { 
 
     $('#div').hide(); 
 
    } 
 
    var search = $('#input').val(); 
 
    $.post('search.php', { 
 
     search: search 
 
    }, function(data) { 
 
     $('#div').html(data); 
 
    }); 
 
    }); 
 
});

#div { 
 
    display: none; 
 
    position: absolute; 
 
    bottom: 20px; 
 
    z-index: 2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='div'> 
 
    <a href='www.someplace.com'>HellWorld</a> 
 
</div> 
 
<input id='input' type='text'>

來源

2017-07-07 19:27:51 Barmar

是的，現在明白了，關於您提到的兩個主題。我已經更新了這個問題，問題似乎是'position：absolute;底部20px;'在'CSS'中。 –

顯示一個div並保持它表明（），如果我在上面點擊

回答

相關問題