jQuery的 - 向上滑動的文本框焦點

Question

DIV目前我有： -

jQuery("#search-jobs").keyup(function() { 

    if (!jQuery(this).val()) { 
     jQuery('#search-controls').slideUp(300); 
    } else { 
     jQuery('#search-controls').slideDown(300); 
    } 

}); 

哪，只要你開始在文本框中鍵入向上滑動的搜索控件。我想改變這個，這樣當文本框有焦點時，這個就會滑向上。我曾嘗試： -

jQuery("#search-jobs").focus(function() { 

    jQuery('#search-controls').slideUp(300); 

}); 

HTML

<div class="meta-content"> 
    <div id="search-controls" style="display: block;"> 
     <div class="col-md-6"> 
     <select> 
      <option value="All">All sectors</option> 
      <option value="Finance">Finance</option> 
      <option value="Hr">Human Resources</option> 
      <option value="Procurement">Procurement &amp; Supply Chain</option> 
      <option value="Sales">Sales &amp; Marketing</option> 
     </select> 
     <select> 
      <option value="All">Salary range</option> 
      <option value="10000">£10,000 - £19,999</option> 
      <option value="20000">£20,000 - £29,999</option> 
      <option value="30000">£30,000 - £49,999</option> 
      <option value="50000">£50,000 - £69,999</option> 
      <option value="70000">£70,000 - £99,999</option> 
      <option value="100000">£100,000+</option> 
      <option value=""></option> 
     </select> 
     </div> 
     <div class="col-md-6"> 
     <select> 
      <option value="All">All job types</option> 
      <option value="Permanent">Permanent</option> 
      <option value="Temporary">Temporary</option> 
      <option value="Interim">Interim</option> 
     </select> 
     <select> 
      <option value="All">All job locations</option> 
      <option value="Leicester">Leicester</option> 
      <option value="Nottingham">Nottingham</option> 
      <option value="Derby">Derby</option> 
      <option value="Lincoln">Lincoln</option> 
     </select> 
     </div> 
    </div> 
    <input id="search-jobs" type="text" placeholder="Search DISTINCT for jobs e.g. Accountant"><span class="icon-search"></span> 
    <div class="clearfix"></div> 
    <a class="text-white" href="#"> 
     <p class="meta-text">I’m an employer looking for candidates<span class="more-info"></span></p> 
    </a> 
</div> 

但是，這是行不通的，任何想法？

Answer 1

如果您想對焦點的效果基本show和模糊的了slideDown，你可以做這樣的：

jQuery("#search-jobs").focus(function() { 
    jQuery('#search-controls').slideUp(300); 
}).blur(function() { 
    jQuery('#search-controls').slideDown(300); 
}); 

如果你想對焦點了slideDown和模糊的效果基本show，你可以不喜歡它這樣的：

jQuery("#search-jobs").focus(function() { 
    jQuery('#search-controls').slideDown(300); 
}).blur(function() { 
    jQuery('#search-controls').slideUp(300); 
});