javascript 使用jQuery单击文本框时如何隐藏和显示div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22270473/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide and show a div when click on text box using jQuery
提问by Neeraj
How can i hide and show a div when click on the basis of text box. i want to show these type of result,the cursor pointer is inside the textbox the div will shown otherwise the focus is out the div will be hidden and if any value is inside a textbox the div will shown if the value is cleared the div will be hidden .these are the code
单击文本框时如何隐藏和显示 div。我想显示这些类型的结果，光标指针在文本框内，div 将显示，否则焦点不在 div 将被隐藏，如果文本框内有任何值，div 将显示，如果该值被清除，div 将被隐藏。这些是代码
<div class="banner_search_inner_box_search">
<input type="text" name="search" class="search" id="searchid" onkeyup="getshows();" value="" placeholder="Enter a City,Locality" autocomplete="off">
<div id="result"></div>
</div>
<div id="drope_box" style="display:none;">
<div class="banner_search_type">
<select id="property_type" name="property_type">
<option value="All">All</option>
<option value="Apartment">Apartment</option>
<option value="Plot">Plot</option>
</select>
</div>
<div class="banner_search_price_min">
<select name="price_min" class="search_list" id="price_min">
<option value="">Price Min</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
<div class="banner_search_price_max">
<select name="price_max" id="price_max">
<option value="">Price Max</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
</div>
here is my js code
这是我的 js 代码
<script type="text/javascript">
function getshows()
{
if(document.getElementById("searchid").value != "")
{
document.getElementById("drope_box").style.display="block";
}
else
{
document.getElementById("drope_box").style.display="none";
}
}
</script>
<script type="text/javascript">
$('#searchid').blur(function() {
$("#drope_box").hide()
});
$('#searchid').focus(function() {
$("#drope_box").show()
});
</script>
somebody please help me
有人请帮助我
回答by Ani
Here: http://jsfiddle.net/Kq9pX/
在这里：http: //jsfiddle.net/Kq9pX/
JS
JS
Do it on load: Wrap around document.ready function.
在加载时执行：环绕 document.ready 函数。
$('#searchid').blur(function() {
if($(this).val() != ""){
$("#drope_box").show();
}
else{
$("#drope_box").hide();
}
});
$('#searchid').focus(function() {
$("#drope_box").show();
});
回答by antony
It's generally advised to attach events using jQuery's onrather than blur(), focus(), click()etc in newer versions of jQuery, although I admit in this case there is no difference (read more here Why use jQuery on() instead of click()). But caching jQuery objects by storing them in a variable, like below, is slightly faster.
它通常建议使用jQuery的附加事件on，而不是blur()，focus()，click()等jQuery中的较新版本，但我在这种情况下，承认是没有区别的（在这里阅读更多，而不是点击（为什么在使用jQuery（）） ）。但是通过将 jQuery 对象存储在变量中来缓存 jQuery 对象，如下所示，稍微快一些。
var $search = $('#searchid');
var $dropBox = $('#drope_box');
$search.on('blur', function () {
$dropBox[($.trim($search.val()).length > 0 ? 'show' : 'hide')]();
}).on('focus', function () {
$dropBox.show();
});
回答by G.Mendes
There's no problem with showand hideother than when it's showed the div hides if you try to select the options, to turn this around we can use focusouton the drope_boxdiv:
有没有问题，show并且hide如果您尝试选择的选项，来扭转这个局面，我们可以使用时，它显示在div皮比其他focusout的drope_boxDIV：
$(document).ready(function(){
$('#drope_box').focusout(function() {
//check if the text input and selects have values selected
if($("#searchid").val() == "" &&
$("#property_type").val() == "" &&
$("#price_min").val() == "" &&
$("#price_max").val() == "" )
$("#drope_box").hide() //if not, hides
});
$('#searchid').focus(function() {
$("#drope_box").show()
});
});
Of course, for it to work the:
当然，为了让它工作：
<option value="All">All</option>
Must be cleared:
必须清除：
<option value="">All</option>
FIDDLE: http://jsfiddle.net/e672Y/1/
回答by theonlygusti
Use jQuery:
使用jQuery：
$("#textbox").mouseenter(function(){
$("#div").show();
});
$("#textbox").mouseleave(function(){
$("#div").hide();
});
This so far will show the div whilst it is hovered, mouseenter checks if the textbox is moused over, mouseleave checks if it is not.
到目前为止，它会在 div 悬停时显示 div，mouseenter 检查文本框是否被鼠标悬停，mouseleave 检查是否没有。
