jQuery - 焦点/模糊显示/隐藏输入组

Question

我有一个小组，有2组3输入。

每组只能看到一个输入。

如果我关注输入，则会显示同一组中的所有内容。

如果没有聚焦该组的输入，则只应出现第一个。

$('input').focus(function () {
    $(this).closest('div').addClass('focused');
}).blur(function () {
    $(this).closest('div').removeClass('focused');
})

这适用于Chrome，但不适用于Firefox（请查看我的小提琴 ）。
在获得焦点之前，两个右侧输入都被隐藏。
似乎事件冒泡顺序在两个浏览器上都不同。

有人可以帮助我为所有浏览器做这项工作吗？

Answer 1

你可以添加一点延迟来防止这种情况。

$('input').focus(function () {
    var $parent = $(this).closest('div');
    var timeoutId = $parent.data('tid');

    if (timeoutId) {
        // Aborting the blur
        clearTimeout(timeoutId);
    }

    $parent.addClass('focused');
}).blur(function () {
    var $parent = $(this).closest('div');

    var tid = setTimeout(function(){
        $parent.removeClass('focused');
    }, 1);

    $parent.data('tid', tid);
})

http://jsfiddle.net/b439u/5/