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

在模糊时，您可以查看哪些对象具有焦点，如果它是您的选择选项，则无法进行幻灯片。

我在最近工作的一些代码中有类似的东西，在我的情况下，如果条目无效，我希望防止焦点丢失（例如＆＃34;这两个集合必须总计相同的值＆＃34;）。我会将焦点强制回到无效字段，除非另一个字段是焦点。

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

Fiddle

可选地

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

Fiddle

修改

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

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

Answer 2

您可以使用slideToggle

jQuery("#search-jobs").click(function() {
    jQuery('#search-controls').slideToggle(300);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 - 当文本框没有焦点时隐藏div，但有异常

2 个答案: