Question

如何在单击文本框的基础上隐藏和显示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>

这是我的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而不是blur()，focus()，click()等附加事件，尽管我承认在这种情况下有没有区别（在这里阅读更多Why use jQuery on() instead of 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隐藏，为了解决这个问题，我们可以在{{focusout上使用drope_box 1}} div：

$(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>

FIDDLE ：http://jsfiddle.net/e672Y/1/

Answer 4

使用jQuery：

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

到目前为止，这将显示div在盘旋时，mouseenter检查文本框是否被鼠标悬停，mouseleave检查它是否是。

如何使用jQuery单击文本框时隐藏和显示div

4 个答案: