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
尝试使用on("focusout",
而不是on("blur"),
,,因为blur
事件并不总是被触发。
在选择列表div上设置属性tabindex=-1
(了解“ tabindex”属性)。
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).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.