Question

请查看JSFiddle：

$('#contacts .tab-content').focusout(function () {
    $('#contacts .active').removeClass('active');
});

JSFiddle

我在页面底部有一个（Bootstrap 3）面板，当我点击它的标签时弹出它，当我点击它之外的任何地方时它会向下移动。为此，我将焦点放在面板上，并在焦点丢失时删除.active类。问题是，如果我点击面板内的任何其他可聚焦元素（如输入或按钮），它也会失去焦点并触发功能。如何在面板中包含所有元素，并在没有焦点时删除.active类？

Answer 1

$('#contacts > .nav-tabs a').click(function() {
    $('#contacts .tab-content').focus();
    $('#panel').toggleClass('active');
});

$(document).click(function(e){
    if(!$(event.target).closest( ".tab-content" ).length && !$(event.target).closest( ".nav-tabs a" ).length){
        $('#panel').removeClass('active');
    }
});

检查一次

Javascript并专注于后代元素

1 个答案: