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

Проверить этот раз