2

Estoy intentando mostrar un submenu cuando se hace click en un item y que cuando le de click a otro Submenu este se debe ocultar y mostrar el Submenu del item que di click y ademas de eso debe eliminar las clase que se agrega llamada open y añadirla al item que di click, de igual manera si le doy click a un item y le vuelvo a dar click a ese mismo item, debe ocultar el submenu, pero no he podido lograrlo, tengo el siguiente código

	$(".subtitle .action").click(function(event){
			 var subtitle = $(this).parents(".subtitle");
			 var submenu = $(subtitle).find(".submenu");
			 
			 $(".submenu").not($(submenu)).slideUp("slow").addClass("opacity");
			 $(".open").not($(subtitle)).removeClass("open");

			 $(subtitle).toggleClass("open");
			 $(submenu).slideToggle("slow").toggleClass("opacity");

			 return false;
			});
<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
	<style type="text/css">
		.submenu {
			display: none;
		}
		.opacity {
			opacity: 0;
		}
	</style>
</head>
<body>
	<ul>
		<li class="subtitle">
			<a href="#" class="action">Inicio</a>
			<ul class="submenu">
				<li>
					<a href="#">Inicio 1</a>
				</li>
				<li>
					<a href="#">Inicio 2</a>
				</li>
				<li>
					<a href="#">Inicio 3</a>
				</li>
			</ul>
		</li>
		<li class="subtitle">
			<a href="#" class="action">Nosotros</a>
			<ul class="submenu opacity">
				<li>
					<a href="#">Nosotros 1</a>
				</li>
				<li>
					<a href="#">Nosotros 2</a>
				</li>
				<li>
					<a href="#">Nosotros 3</a>
				</li>
			</ul>

		</li>
		<li class="subtitle">
			<a href="#" class="action">Contacto</a>
			<ul class="submenu opacity">
				<li>
					<a href="#">Contacto 1</a>
				</li>
				<li>
					<a href="#">Contacto 2</a>
				</li>
				<li>
					<a href="#">Contacto 3</a>
				</li>
			</ul>
		</li>
		<li class="subtitle">
			<a href="#" class="action">Empresa</a>
			<ul class="submenu opacity">
				<li>
					<a href="#">Empresa 1</a>
				</li>
				<li>
					<a href="#">Empresa 2</a>
				</li>
				<li>
					<a href="#">Empresa 3</a>
				</li>
			</ul>
		</li>
	</ul>
	<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</body>
</html>

1 respuesta 1

1

Lo que haría yo es eliminar las clases a todos los elementos al momento de dar clic en un botón del menú, exceptuando los elementos que pertenecen al botón que ejecuta el evento osea a this.

$(".subtitle .action").click(function(event){
 var subtitle = $(this).parents(".subtitle");
 var submenu = $(subtitle).find(".submenu");
 
 $(".submenu").not($(submenu)).slideUp("slow").removeClass("opacity");
 $(".open").not($(subtitle)).removeClass("open");

 $(subtitle).toggleClass("open");
 $(submenu).slideToggle("slow").toggleClass("opacity");

 return false;
});
<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
	<style type="text/css">
		.submenu {
			display: none;
		}
		.opacity {
			opacity: 0.5;
		}
	</style>
</head>
<body>
	<ul>
		<li class="subtitle">
			<a href="#" class="action">Inicio</a>
			<ul class="submenu">
				<li>
					<a href="#">Inicio 1</a>
				</li>
				<li>
					<a href="#">Inicio 2</a>
				</li>
				<li>
					<a href="#">Inicio 3</a>
				</li>
			</ul>
		</li>
		<li class="subtitle">
			<a href="#" class="action">Nosotros</a>
			<ul class="submenu">
				<li>
					<a href="#">Nosotros 1</a>
				</li>
				<li>
					<a href="#">Nosotros 2</a>
				</li>
				<li>
					<a href="#">Nosotros 3</a>
				</li>
			</ul>

		</li>
		<li class="subtitle">
			<a href="#" class="action">Contacto</a>
			<ul class="submenu">
				<li>
					<a href="#">Contacto 1</a>
				</li>
				<li>
					<a href="#">Contacto 2</a>
				</li>
				<li>
					<a href="#">Contacto 3</a>
				</li>
			</ul>
		</li>
		<li class="subtitle">
			<a href="#" class="action">Empresa</a>
			<ul class="submenu">
				<li>
					<a href="#">Empresa 1</a>
				</li>
				<li>
					<a href="#">Empresa 2</a>
				</li>
				<li>
					<a href="#">Empresa 3</a>
				</li>
			</ul>
		</li>
	</ul>
	<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.