Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Menu despegable _ ocultar al hacer click

Estas en el tema de Menu despegable _ ocultar al hacer click en el foro de Jquery en Foros del Web. Hola!, estoy iniciandome en esto de Html/jquery/java/php etc etc. Estoy pegado hace muchos días en algo que creo es muy sencillo. Se trata de un ...
  #1 (permalink)  
Antiguo 08/12/2015, 09:59
 
Fecha de Ingreso: diciembre-2015
Mensajes: 6
Antigüedad: 8 años, 3 meses
Puntos: 0
Pregunta Menu despegable _ ocultar al hacer click

Hola!, estoy iniciandome en esto de Html/jquery/java/php etc etc. Estoy pegado hace muchos días en algo que creo es muy sencillo.
Se trata de un menu despegable que funciona de maravillas pero no logro que se oculte al hacer un click con la opción elegida.
gracias!

El código script.js
Código Java:
Ver original
  1. var ww = document.body.clientWidth;
  2.  
  3. $(document).ready(function() {
  4.     $(".nav li a").each(function() {
  5.         if ($(this).next().length > 0) {
  6.             $(this).addClass("parent");
  7.         };
  8.     })
  9.    
  10.     $(".toggleMenu").click(function(e) {
  11.         e.preventDefault();
  12.         $(this).toggleClass("active");
  13.         $(".nav").toggle();
  14.     });
  15.     adjustMenu();
  16. })
  17.  
  18. $(window).bind('resize orientationchange', function() {
  19.     ww = document.body.clientWidth;
  20.     adjustMenu();
  21. });
  22.  
  23. var adjustMenu = function() {
  24.     if (ww < 768) {
  25.         $(".toggleMenu").css("display", "inline-block");
  26.         if (!$(".toggleMenu").hasClass("active")) {
  27.             $(".nav").hide();
  28.         } else {
  29.             $(".nav").show();
  30.         }
  31.         $(".nav li").unbind('mouseenter mouseleave');
  32.         $(".nav li a.parent").unbind('click').bind('click', function(e) {
  33.             // must be attached to anchor element to prevent bubbling
  34.             e.preventDefault();
  35.            
  36.             $(this).parent("li").toggleClass("hover");
  37.         });
  38.     }
  39.     else if (ww >= 768) {
  40.         $(".toggleMenu").css("display", "none");
  41.         $(".nav").show();
  42.         $(".nav li").removeClass("hover");
  43.         $(".nav li a").unbind('click');
  44.         $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
  45.             // must be attached to li so that mouseleave is not triggered when hover over submenu
  46.             $(this).toggleClass('hover');
  47.            
  48.         });
  49.     }
  50. }

Cotigo html:

Código HTML:
<body>
<div class="container">
	<a  class="toggleMenu" >Menu</a>
	<ul class="nav">
	<li  class="test"><a >Ingresos</a>
		<ul>
			<li>
			<a name="ID" id="ID" style="cursor:pointer;">ID</a>
			</li>
			<li>
			<a href="#" onclick="EST_FECHA();" style="cursor:pointer;">Fecha</a>
			</li>
                 </ul>
	 </li>
	 <li>
		<a href="#">Menu2</a>
		<ul>
			<li>
				<a href="#">submenu2</a>
				<ul>
					<li><a href="#">opcion1</a></li>
					<li><a href="#">opcion2</a></li>
					<li><a href="#">opcion3</a></li>
				</ul>
			</li>
			<li>
				<a href="#">submenu3</a>
				<ul>
					<li><a href="#">opcion1</a></li>
					<li><a href="#">opcion2</a></li>
					<li><a href="#">opcion3</a></li>
				</ul>
			</li>
		</ul>
	</li>

</ul>
</div>

<script type="text/javascript" src="script.js"></script> 
El codigo css
Código CSS:
Ver original
  1. body, nav, ul, li, a  {margin: 0; padding: 0;}
  2.  
  3. .container {
  4.     width: 90%;
  5.     max-width: 900px;
  6.     margin-top: 0px;
  7.     margin-right: auto;
  8.     margin-bottom: 10px;
  9.     margin-left: auto;
  10. }
  11. .toggleMenu {
  12.     display:  none;
  13.     background: #666;
  14.     padding: 10px 15px;
  15.     color: #fff;
  16. }
  17. .nav {
  18.     list-style: none;
  19.      *zoom: 1;
  20.      background:#9EB847;
  21. }
  22. .nav:before,
  23. .nav:after {
  24.     content: " ";
  25.     display: table;
  26. }
  27. .nav:after {
  28.     clear: both;
  29. }
  30. .nav ul {
  31.     list-style: none;
  32.     width: 9em;
  33. }
  34. .nav a {
  35.     padding: 10px 15px;
  36.     color:#fff;
  37. }
  38. .nav li {
  39.     position: relative;
  40. }
  41. .nav > li {
  42.     float: left;
  43.     border-top: 1px solid #104336;
  44. }
  45. .nav > li > .parent {
  46.     background-image: url("images/downArrow.png");
  47.     background-repeat: no-repeat;
  48.     background-position: right;
  49. }
  50. .nav > li > a {
  51.     display: block;
  52. }
  53. .nav li  ul {
  54.     position: absolute;
  55.     left: -9999px;
  56. }
  57. .nav > li.hover > ul {
  58.     left: 0;
  59. }
  60. .nav li li.hover ul {
  61.     left: 100%;
  62.     top: 0;
  63. }
  64. .nav li li a {
  65.     display: block;
  66.     background: #1d7a62;
  67.     position: relative;
  68.     z-index:100;
  69.     border-top: 1px solid #175e4c;
  70. }
  71. .nav li li li a {
  72.     background:#249578;
  73.     z-index:200;
  74.     border-top: 1px solid #1d7a62;
  75. }
  76.  
  77. @media screen and (max-width: 768px) {
  78.     .active {
  79.         display: block;
  80.     }
  81.     .nav > li {
  82.         float: none;
  83.     }
  84.     .nav > li > .parent {
  85.         background-position: 95% 50%;
  86.     }
  87.     .nav li li .parent {
  88.         background-image: url("images/downArrow.png");
  89.         background-repeat: no-repeat;
  90.         background-position: 95% 50%;
  91.     }
  92.     .nav ul {
  93.         display: block;
  94.         width: 100%;
  95.     }
  96.    .nav > li.hover > ul , .nav li li.hover ul {
  97.         position: static;
  98.     }
  99.  
  100. }
  #2 (permalink)  
Antiguo 08/12/2015, 14:36
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: Menu despegable _ ocultar al hacer click

Bienvenido a Foros del Web.

Noto que la forma en la que muestras y ocultas las opciones depende de las dimensiones del dispositivo. Cuando el ancho es menor a 768 píxeles, se realiza con clics, mientras que cuando es mayor o igual a la cantidad mencionada, se realiza mediante los eventos mouseenter y mouseleave. La verdad, no sé cuál será el problema que mencionas ya que ambas formas están funcionando correctamente.

Un saludo
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 08/12/2015, 18:13
 
Fecha de Ingreso: diciembre-2015
Mensajes: 6
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Menu despegable _ ocultar al hacer click

Hola, gracias por tu respuesta.
Es correcto el funcionamiento, pero quiero mejorarlo en el siguiente sentido: para terminar de recorrer los menus se supone que el usuario dará un click con la opcion que requiera, el resultado se muestra en segundo plano y el menu sigue activo, me gustaría que se cerrará ya que el usuario ya indicó que necesitaba.
  #4 (permalink)  
Antiguo 08/12/2015, 18:29
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: Menu despegable _ ocultar al hacer click

Bastaría con que delegues el evento a los enlaces finales del menú, de tal forma que cuando se seleccione alguno, se cierre todo. Como veo que tienes muchos enlaces en distintos niveles, puedes apoyarte asignándoles una clase en particular, de este modo, los tomarías por dicha clase y delegas el evento click en ellos.

Un saludo
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #5 (permalink)  
Antiguo 10/12/2015, 09:02
 
Fecha de Ingreso: diciembre-2015
Mensajes: 6
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Menu despegable _ ocultar al hacer click

Alexis,
Es posible me indiques cual es el evento que hay que poner en la línea, he probado algunos como .hide pero no me funciona.
gracias.
  #6 (permalink)  
Antiguo 10/12/2015, 10:21
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: Menu despegable _ ocultar al hacer click

Me refería a que les delegues el evento click a los enlaces finales, es decir, a las opciones, de tal modo que cuando se le dé clic a alguna de ellas, procedes a ocultar a todas las opciones menú.

Un saludo
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #7 (permalink)  
Antiguo 22/12/2015, 08:14
 
Fecha de Ingreso: diciembre-2015
Mensajes: 6
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Menu despegable _ ocultar al hacer click

ok!! muchas gracias!

Etiquetas: despegable, jquery-ajax
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:15.