Question

目前我有： -

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

如果您想要焦点上的slideUp和模糊的slideDown，您可以这样做：

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

如果你想在焦点上使用slideDown，在模糊时想要一个slideUp，你可以这样做：

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

jQuery - 在文本框焦点

1 个答案: