Antwort an „Gunnar Bittersmann“ verfassen

SELF-Forum

Icon Flyout / slidern ähnlich wie bei meiner Navigation

Gunnar Bittersmann E-Mail-Adresse des Autors Homepage des Autors

@@Rolf B

Da gibt’s noch einiges Verbesserungspotential:

	const toggle = document.querySelector('#' + toggleId);

Besser

	const toggle = document.querySelector(`#${toggleId}`);

Aber wohl noch besser:

	const toggle = document.getElementById(toggleId);

	toggle.addEventListener('click', function() {

Ich würde sowas als Pfeilfunktion schreiben. Muss man aber nicht.

		const currentState = toggle.getAttribute('aria-expanded');
		const newState = currentState === 'true' ? 'false' : 'true';
		toggle.setAttribute('aria-expanded', newState);
		const isExpanded = toggle.getAttribute('aria-expanded') === 'true';

Den aktuellen Ausgangszustand hast du bereits mit currentState abgefragt. Du kennst also den Folgezustand. Die erneute Abfrage des aktuellen Zustands macht keinen Sinn.

Sorge also dafür, dass du isExpanded gleich bei der ersten Abfrage von toggle.getAttribute('aria-expanded') setzt und verwende das auch schon bei toggle.setAttribute().

		menu.style.display = isExpanded ? 'block' : 'none';

Hier besser das hidden-Attribut verwenden. Das macht den Code besser lesbar, außerdem ist die Änderung im DOM im Inspektor im Entwicklertool sichtbar.

		menu.hidden = !isExpanded;

Jolan tru

--
Wenn der Faschismus wiederkehrt, wird er nicht sagen „Hallo, ich bin der Faschismus.“ Er wird sagen: „Ich suche in diesem Deutschen Bundestag keine anderen Mehrheiten als die in der demokratischen Mitte. Wenn es heute eine solche Mehrheit gegeben hat, bedauere ich das.“ (Friedrich Merz)
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen