• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] 8 CSS /JS DropDown Menüs, nur das 1. funktioniert

H

HaPe

New member
Hallo, ich bin CSS Anfänger und habe mir durch mühsame Web-Inspiration ein Dropdown-Menü zusammengebaut.
Das Menü habe ich auf der Webseite 8x platziert, aber nur das erste funktioniert so wie es sollte.(Beim Aufklappen eines 2ten Eintrags, sollte das offene Menü wieder schliessen.

Die ID der Menüs habe angepasst und fortlaufend Nummeriert. (#cssmenu 1-8) HTML und CSS ist Fehlerfrei aber mit JS bin ich total überfordert.

Mit der Datei script2.js ist nur das erste Dropdown Menü aktiviert, und man kann gut sehen wie ich das möchte. Welche Änderungen muss ich jetzt noch auf dem Script vornehmen, damit alle

Menüs aktiv werden?

Für jegliche Hilfe, herzlichen Dank.

Die Webseite kann man unter folgenden Link einsehen.
ADRESSE:
Web-Start


JS Script

Code: 
( function( $ ) {
$( document ).ready(function() {
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
  $('#cssmenu li').removeClass('active');
  $(this).closest('li').addClass('active');	
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#cssmenu ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;	
  }		
});
});
} )( jQuery );
 
Zuletzt bearbeitet von einem Moderator:
Vorschlag:
ändere mal testhalber im oben gezeigten Script alle Selektoren "#cssmenu" in "#cssmenu2", und verrate uns, ob dann nur der zweite Block funktioniert.
 
Danke ja, hab ich bereits gemacht, dann funktioniert nur das 2te Menü.

Wie muss ich den Script anpassen damit alle funktionieren, ich habe da keine Ahnung?
 
Das Script weist allen Elementen mit id "cssmenu" diverse css-Klassen zu, sowie einen "onclick" - eventhandler (eine Funktion) zu. In der Funktion werden dann erneut die css-Klassenzuweisung geändert.

Da aber nicht alle deine Menü-Container-Divs dieselbe id "cssmenu" haben (sondern "cssmenu2", "cssmenu3", etc., ich vermute das hast du manuell angepasst) greift der Code nur für den einen Container, bei dem der Selektor in der Funktion und die entsprechende id im HTML-Code übereinstimmen.

Ich würde versuchen, mit einem anderen Selektor zu arbeiten, JQuery bietet diverse Möglichkeiten, zum Beispiel den "Name Selector" - schau mal hier: https://api.jquery.com/attribute-starts-with-selector/

Alternativ kannst du den Code im Script so anpassen, dass alle Menü-Container einbezogen werden. Ich habe im folgenden Beispiel deinen Code soweit ergänzt, dass Menü 1 und Menü 2 funktionieren dürften. Probier's mal, ich habe es nicht getestet.

HTML: 
<script>
    ( function( $ ) {
		$( document ).ready(function() {
			
			*/--------------------- cssmenu -----------------------*/

			$('#cssmenu ul ul li:odd').addClass('odd');
			$('#cssmenu ul ul li:even').addClass('even');
			$('#cssmenu > ul > li > a').click(function() {
				$('#cssmenu li').removeClass('active');
				$(this).closest('li').addClass('active');
				var checkElement = $(this).next();
				if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
					$(this).closest('li').removeClass('active');
					checkElement.slideUp('normal');
					}
				if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
					$('#cssmenu ul ul:visible').slideUp('normal');
					checkElement.slideDown('normal');
					}
				if($(this).closest('li').find('ul').children().length == 0) {
					return true;
					} 
				else {
					return false;
					}
				});
			
			*/--------------------- cssmenu2 -----------------------*/

			$('#cssmenu2 ul ul li:odd').addClass('odd');
			$('#cssmenu2 ul ul li:even').addClass('even');
			$('#cssmenu2 > ul > li > a').click(function() {
				$('#cssmenu2 li').removeClass('active');
				$(this).closest('li').addClass('active');
				var checkElement = $(this).next();
				if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
					$(this).closest('li').removeClass('active');
					checkElement.slideUp('normal');
					}
				if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
					$('#cssmenu2 ul ul:visible').slideUp('normal');
					checkElement.slideDown('normal');
					}
				if($(this).closest('li').find('ul').children().length == 0) {
					return true;
					} 
				else {
					return false;
					}
				});

			
			});
		} )( jQuery ); 
</script>
 
Dreamweaver meldet Syntaxfehler.
Nach einer kleinen Anpassung, klappt es, supper Danke sehr. Kann ich jetzt das 8x ergänzen.
Wahrscheinlich nicht ganz der richtige Weg, aber es funktioniert, Top, Danke, das freut mich sehr.

Code: 
   ( function( $ ) {
		$( document ).ready(function() {
			
			/*--------------------- cssmenu -----------------------*/

			$('#cssmenu ul ul li:odd').addClass('odd');
			$('#cssmenu ul ul li:even').addClass('even');
			$('#cssmenu > ul > li > a').click(function() {
				$('#cssmenu li').removeClass('active');
				$(this).closest('li').addClass('active');
				var checkElement = $(this).next();
				if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
					$(this).closest('li').removeClass('active');
					checkElement.slideUp('normal');
					}
				if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
					$('#cssmenu ul ul:visible').slideUp('normal');
					checkElement.slideDown('normal');
					}
				if($(this).closest('li').find('ul').children().length == 0) {
					return true;
					} 
				else {
					return false;
					}
				});
			
			/*--------------------- cssmenu2 -----------------------*/

			$('#cssmenu2 ul ul li:odd').addClass('odd');
			$('#cssmenu2 ul ul li:even').addClass('even');
			$('#cssmenu2 > ul > li > a').click(function() {
				$('#cssmenu2 li').removeClass('active');
				$(this).closest('li').addClass('active');
				var checkElement = $(this).next();
				if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
					$(this).closest('li').removeClass('active');
					checkElement.slideUp('normal');
					}
				if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
					$('#cssmenu2 ul ul:visible').slideUp('normal');
					checkElement.slideDown('normal');
					}
				if($(this).closest('li').find('ul').children().length == 0) {
					return true;
					} 
				else {
					return false;
					}
				});

			
			});
		} )( jQuery );
 
Zuletzt bearbeitet von einem Moderator:
1. Sowas ist KEIN CSS-Menü! Das ist ein JS-Menü.
2. Code einfach zu duplizieren ist nie eine gute Idee. Du kannst doch deinen Menüs einfach eine gemeinsame CSS-Klasse geben (über das HTML-Attribut "class") und dann darüber alle Menüs ansprechen:
Code: 
(function($) {
	$(document).ready(function() {
		$('.DEINE_CSS_KLASSE ul ul li:odd').addClass('odd');
		$('.DEINE_CSS_KLASSE ul ul li:even').addClass('even');
		$('.DEINE_CSS_KLASSE > ul > li > a').click(function(){
			var menu = $(this).parent('.DEINE_CSS_KLASSE')
			menu.find("li").removeClass('active');
			$(this).closest('li').addClass('active');
			var checkElement = $(this).next();
			if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
				$(this).closest('li').removeClass('active');
				checkElement.slideUp('normal');
			}
			if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
				menu.find('ul ul:visible').slideUp('normal');
				checkElement.slideDown('normal');
			}
			if ($(this).closest('li').find('ul').children().length == 0) {
				return true;
			} else {
				return false;
			}
		});
	});
})(jQuery);
- ungetestet.

PS:
HaPe schrieb:
Dreamweaver meldet Syntaxfehler.
Zum Vergrößern anklicken....
Auf dieses Stück Software würde ich mich nicht verlassen...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben