Home / Questions / 289974
Accepted
zerokira
Asked: 2020-09-03 11:45:30 +0800 CST 2020-09-03 11:45:30 +0800 CST

Show Submenu and hide when another Submenu is clicked

  • 772

I am trying to show a submenu when it is done clickin an item and that when I give it clickto another Submenu it should be hidden and show the Submenu of the item that I gave clickand in addition to that it should eliminate the class that is added called open and add it to the item that I gave click , in the same way if I give clickan item and I give clickthat same item again, it should hide the submenu , but I have not been able to do it, I have the following code

	$(".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>

javascript

1 Answers

  1. Best Answer

    What I would do is remove the classes from all the elements when clicking on a menu button, except for the elements that belong to the button that executes the event, that is to 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>

    • 1