Javascript 并关注后代元素

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');
    }
});

检查一次