Question

我有这个HTML代码，可以模拟下拉式多重复选框

<div>
   <div class="select">
       <span>Select something</span>
   </div>
   <div class="no-display select-list">
       <div>
          <label class="unchecked" for="value1">
             Value1
          </label>
          <label class="unchecked" for="value2">
             Value2
          </label>
       </div>
   </div>
</div>

和javascript：

  $(".select").live("click", function () {
     $(".select-list").toggleClass("no-display").focus();
  });

  $(".select-list").live("blur", function () {
     $(this).addClass("no-display");
  });

但是在Firefox和Chrome中，模糊事件不起作用，但在IE9中有效。

我想在点击select-list元素外部时关闭它（意味着让它不可见）。

我在该元素上分配blur后使用了focus个事件。

你能告诉我这样做的好方法吗？

由于

Answer 1

尝试使用on("focusout",代替on("blur"),，因为blur事件并不总是被触发。

Answer 2

尝试捕获文档上的单击以隐藏菜单。菜单中的点击也会传播到文档，因此您需要解决此问题（例如，您可以检查event.originalEvent）。

Demo here

Answer 3

在选择列表div上设置属性tabindex=-1（阅读＆＃34; tabindex＆＃34;属性）。

Jquery blur在Firefox和Chrome中不起作用，但在IE9中有效

3 个答案: