jQuery - 当文本框没有焦点时隐藏div,但有异常

Question

我有以下代码,

<div id="search-controls" style="display: none;">
   <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">

<input class="icon-search" type="submit" value="">

jQuery的

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

单击搜索作业文本框时,它将显示搜索控件(4个选项).当您选择选择选项时,搜索控件将消失,因为搜索框已失去焦点.有没有办法阻止这种情况发生？

Answer 1

在模糊时,您可以检查哪些对象具有焦点,如果这是您的选择选项,则无法执行幻灯片.

我在最近工作的一些代码中有类似的东西,在我的情况下,我希望防止焦点在条目无效时丢失(例如"这两个集合必须总计相同的值").我会强制重点回到无效字段,除非另一个字段是焦点.

.blur(function() {
  setTimeout(function(){
    if(!$('#search-controls>.col-md-6>select').is(':focus')) {
        jQuery('#search-controls').slideUp(300);
    }
  },0);
});

小提琴

另外

.blur(function() {
  setTimeout(function(){
    if($('#search-controls>.col-md-6>select:focus').length == 0) {
        jQuery('#search-controls').slideUp(300);
    }
  },0);
});

小提琴

编辑:

为每种方法添加了小提琴.我错过了一个容器div,它需要添加到选择器才能正常运行,以及setTimeout事件按正确顺序处理所需的延迟.

Asker可能希望将此模糊设为非匿名函数,以便他可以将其添加到所有下拉列表的模糊事件中,以便用户可以通过直观的方式再次隐藏它们.