使用jQuery單擊文本框時如何隱藏和顯示div

Question

單擊文本框時如何隱藏和顯示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>

這是我的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>

有人請幫助我

Answer 1

此處： http ： //jsfiddle.net/Kq9pX/

JS

加載時執行：包裝document.ready函數。

$('#searchid').blur(function() {
  if($(this).val() != ""){
    $("#drope_box").show();    
  }
  else{
    $("#drope_box").hide(); 
  }
});

$('#searchid').focus(function() {
  $("#drope_box").show();
});   

Answer 2

通常建議在新版本的jQuery中使用jQuery的on附加事件on而不是blur() ， focus() ， click()等，盡管我承認在這種情況下沒有區別（請在此處閱讀更多信息， 為什么使用jQuery on（）代替） click（） ）。 但是通過將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();
});

Answer 3

show和hide除了顯示div時沒有問題，如果您嘗試選擇選項，則可以隱藏div，為了解決這個問題，我們可以在drope_box div上使用focusout ：

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

當然，要使它起作用：

<option value="All">All</option>

必須清除：

<option value="">All</option>

字段 ： http : //jsfiddle.net/e672Y/1/

Answer 4

使用jQuery：

$("#textbox").mouseenter(function(){
    $("#div").show();
});
$("#textbox").mouseleave(function(){
    $("#div").hide();
});

到目前為止，這將顯示div懸停時的div，mouseenter檢查是否將鼠標懸停在文本框上，mouseleave檢查是否將鼠標懸停在div上。