Question

I have this HTML code which simulates a dropdown multi-checkbox

<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>

And javascript:

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

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

But in Firefox and Chrome, the blur event doesn’t work, but works in IE9.

I want, when clicking outside select-list element, to close it (means make it invisible).

I used blur event after assigned focus on that element.

Could you show me the good approach to do that ?

Thanks

Answer 1

Try trapping a click on the document to hide the menu. The clicks from the menu will also propagate to the document so you’ll need a work around for that (you can check event.originalEvent for example).

Demo here