Comunidad de diseño web y desarrollo en internet online

Menú bootstrap collapsable y Javascript

Citar            
MensajeEscrito el 25 Jun 2015 03:17 pm
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.

Por grodrig61

Claber

223 de clabLevel



 

chrome
Citar            
MensajeEscrito el 26 Jun 2015 09:36 pm
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');
});

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

chrome
Citar            
MensajeEscrito el 29 Jun 2015 12:27 pm
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>

Por grodrig61

Claber

223 de clabLevel



 

chrome
Citar            
MensajeEscrito el 29 Jun 2015 02:40 pm
ammm si te das cuenta que esta mal verdad?

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

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

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

chrome
Citar            
MensajeEscrito el 29 Jun 2015 03:04 pm
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

Por grodrig61

Claber

223 de clabLevel



 

chrome
Citar            
MensajeEscrito el 29 Jun 2015 03:25 pm
Resuelto ! Gracias, tu aporte me orientó a la solución !!!

Por grodrig61

Claber

223 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.