[FRAGE] Responsive Menü

[great_smith]

Moin,

ich habe mir auf youtube mal angesehen, wie man sich eine responsive navigation baut.
Dazu habe ich mir einen Code aus einem Link in der Videobeschreibung besorgt.

Das funktioniert soweit gut, ABER:
Sobald ein Menüpunkt gewählt ist, bei dem es ein Submenu gibt, wird dieses ausgefahren (soweit noch alles gut). Gibt es allerdings noch einen weiteren Menüpunkt in der ersten Ebene, der ein Submenu enthält, klappt auch dieses aus. Allerdings bleibt auch das Menü aus dem andere ausgefahren.
Ich würde gerne, dass immer nur ein Submenu offen sein kann. Bisher kann man es nur schließen, in dem man wieder auf das Parent-Listenelement klickt. Habt ihr ne Idee?

Hier mal der js-code

		$(document).ready(function() {
			var menu = $(".menu");
			$(window).resize(function(){
				$(".menu-toggle").removeClass("active");
				if($(window).innerWidth() > 600){
					menu.show();
				} else {
					menu.hide();
				}
			});
			$(".menu-toggle").click(function(){
				$(this).toggleClass("active");
				menu.slideToggle();
			})
			$(".open-submenu").click(function(){
				$(this).toggleClass("active");
				$(this).next("ul").slideToggle();
				$(this).children(".arrow").toggleClass("down up");
			});
		});

Danke schon mal im voraus!

 

[kkapsner]

Du musst beim Klicken dir einfach das letzte geöffenete Menu (das hat ja die Klasse active) holen und dieses dann schließen.

 

[zirzofer]

z.b. mittels document.querySelector(".active")

 

[great_smith]

Okay, danke für eure Antworten. An welcher Stelle gehört, der Code denn? Ich bin leider nicht so fit js, sonst hätte ich mir das Menü wahrscheinlich auch selbst gebaut.

 

[kkapsner]

			$(".open-submenu").click(function(){
				var active = $(".active").add(this);
				active.toggleClass("active");
				active.next("ul").slideToggle();
				active.children(".arrow").toggleClass("down up");
			});