当折叠可见时，如何通过单击主体隐藏我的折叠 Bootstrap 3 导航栏？

我正在为我将去工作的机构制作一个 WordPress 网站。 我使用 Bootstrap 3.0，并创建了一个响应式菜单。

如何在折叠和可见时隐藏菜单（第二张图片），单击主体，并且菜单按钮更改其颜色，只有折叠可见？

bootstrap.js 和 jquery 在我的页脚中连接。

这是一个功能性的解决方案：

$(document).on('click touchstart', function (e) {
if ($(e.target).closest(".navbar-collapse").length === 0 && $(e.target).closest('[data-target=".navbar-collapse"]').length === 0) {
    $(".navbar-toggle").collapse('hide');
}
});