Menú bootstrap collapsable y Javascript

Hola, estoy haciendo una aplicación para móviles (Angular JS, Bootstrap y JAVASCRIPT), y tengo un menú bootstrap que colapsa cuando se "achica" el dispositivo. Funciona bien.

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

En el pie de la página, tengo un botón, que ocupa el 100% del ancho. y que "inyecta/llama" a otro html. Funciona bien.

Mi problema es que si el menú está desplegado por alguna razón, no cierra cuando clickeo el botón en el pie de página.
Quisiera que si clickeo cualquier punto de la pantalla, el menú se cierre, si es que está desplegado.
Muchísimas gracias por la ayuda que me puedan brindar, estoy parado con esto.

Solo se colapsa al elegir una opción del toggle menu (el que se ve en pantallas chicas).

Entonces si dan clic en otro botón debes de decirle al menu que se oculte:

Código Javascript :

$(aquiTubotondelFooter).on('click', function(){
       $(aquiTuMenu).collapse('hide');
});

Hola elporfirio, gracias por responder, escribo lo que hice, pues no funciona aún.

<script> // script para que cierre automáticamente el collapsed (móviles) //
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') ) {
$(this).collapse('hide');
}
});
$(botonfooter).on('click', function(){
$(menucollap).collapse('hide');
});
</script>

el resto:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul id="menucollap" class="nav navbar-nav botonera">
<li><a href="#promdeedad" class="enlace">Edad</a></li>
<li><a href="#promdeantiguedad" class="enlace">Antiguedad</a></li>
</ul>
</div>
</div>
</nav>
<div id="custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<ul class="nav nav-pills nav-justified">
<li id="botonfooter"><a href="#personas"><span class="glyphicon glyphicon-user"></span><span class="glyphicon glyphicon-user"></span></a>
</li>
</ul>
</div>

ammm si te das cuenta que esta mal verdad?

botonfooter !== "botonfooter" !== "#botonfooter" !== ".botonfooter"

variable ---------- tag selector ----- id selector ---------- class selector

Gracias, he entendido las diferencias, pero.........qué es lo que debo referenciar ?

El id ? pues no funciona tomando ambos con # o referenciando a la clase

Puede ser el tipo de botón ?

Gracias, y disculpa

Resuelto ! Gracias, tu aporte me orientó a la solución !!!