[SOLUCIONADO] Menu despegable _ ocultar al hacer click

rgiroz · #1 (**permalink**) 08/12/2015, 09:59

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 originalvar ww = document.body.clientWidth;
 
$(document).ready(function() {
    $(".nav li a").each(function() {
        if ($(this).next().length > 0) {
            $(this).addClass("parent");
        };
    })
    
    $(".toggleMenu").click(function(e) {
        e.preventDefault();
        $(this).toggleClass("active");
        $(".nav").toggle();
    });
    adjustMenu();
})
 
$(window).bind('resize orientationchange', function() {
    ww = document.body.clientWidth;
    adjustMenu();
});
 
var adjustMenu = function() {
    if (ww < 768) {
        $(".toggleMenu").css("display", "inline-block");
        if (!$(".toggleMenu").hasClass("active")) {
            $(".nav").hide();
        } else {
            $(".nav").show();
        }
        $(".nav li").unbind('mouseenter mouseleave');
        $(".nav li a.parent").unbind('click').bind('click', function(e) {
            // must be attached to anchor element to prevent bubbling
            e.preventDefault();
            
            $(this).parent("li").toggleClass("hover");
        });
    } 
    else if (ww >= 768) {
        $(".toggleMenu").css("display", "none");
        $(".nav").show();
        $(".nav li").removeClass("hover");
        $(".nav li a").unbind('click');
        $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
            // must be attached to li so that mouseleave is not triggered when hover over submenu
            $(this).toggleClass('hover');
            
        });
    }
}

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 originalbody, nav, ul, li, a  {margin: 0; padding: 0;}
 
.container {
    width: 90%;
    max-width: 900px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
}
.toggleMenu {
    display:  none;
    background: #666;
    padding: 10px 15px;
    color: #fff;
}
.nav {
    list-style: none;
     *zoom: 1;
     background:#9EB847;
}
.nav:before,
.nav:after {
    content: " "; 
    display: table; 
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
    width: 9em;
}
.nav a {
    padding: 10px 15px;
    color:#fff;
}
.nav li {
    position: relative;
}
.nav > li {
    float: left;
    border-top: 1px solid #104336;
}
.nav > li > .parent {
    background-image: url("images/downArrow.png");
    background-repeat: no-repeat;
    background-position: right;
}
.nav > li > a {
    display: block;
}
.nav li  ul {
    position: absolute;
    left: -9999px;
}
.nav > li.hover > ul {
    left: 0;
}
.nav li li.hover ul {
    left: 100%;
    top: 0;
}
.nav li li a {
    display: block;
    background: #1d7a62;
    position: relative;
    z-index:100;
    border-top: 1px solid #175e4c;
}
.nav li li li a {
    background:#249578;
    z-index:200;
    border-top: 1px solid #1d7a62;
}
 
@media screen and (max-width: 768px) {
    .active {
        display: block;
    }
    .nav > li {
        float: none;
    }
    .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav li li .parent {
        background-image: url("images/downArrow.png");
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }
 
}

Alexis88 · #2 (**permalink**) 08/12/2015, 14:36

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

rgiroz · #3 (**permalink**) 08/12/2015, 18:13

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.

Alexis88 · #4 (**permalink**) 08/12/2015, 18:29

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

rgiroz · #5 (**permalink**) 10/12/2015, 09:02

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.

Alexis88 · #6 (**permalink**) 10/12/2015, 10:21

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

rgiroz · #7 (**permalink**) 22/12/2015, 08:14

ok!! muchas gracias!