@@Felix Riesterer

$("#hamburger-navigation ul").parent().prepend(
	$("<button>open</button>")
	.attr("aria-label", "open")
	.attr("title", "open")
	.click(function (e) {
		var open, $ul;

		$(e.target).parent().toggleClass("open");

		open = $(e.target).parent().hasClass("open");

		$(e.target)
		.html(open ? "close" : "open")
		.attr("aria-label", open ? "close" : "open")
		.attr("title", open ? "close" : "open");
	})
);

Wird es in Vanilla-JS ebenso kurz und iteriert es wirklich über alle gefundenen Elemente in der gleichen Art?

Ja, das wird es. Und ja, das tut es:

document.querySelectorAll("#hamburger-navigation ul").forEach(function (ulElement) {
	const buttonElement = document.createElement("button");
	buttonElement.innerText = "open";
	buttonElement.setAttribute("aria-label", "open");
	buttonElement.setAttribute("title", "open");

	buttonElement.addEventListener("click", function (event) {
		event.target.parentNode.classList.toggle("open");

		const open = event.target.parentNode.classList.contains("open");

		event.target.innerText = open ? "close" : "open";
		event.target.setAttribute("aria-label", open ? "close" : "open");
		event.target.setAttribute("title", open ? "close" : "open");	
	});

	ulElement.parentNode.insertBefore(buttonElement, ulElement);
});

Dass meine Zeilen länger sind als bei dir, kommt vor allem daher, dass ich sprechende Variablennamen verwendet habe: event statt e, buttonElement, ulElement.

Statt event.target lässt sich auch this verwenden. Ich hab das nur 1:1 so aus der Vorlage umgesetzt. Im jQuery auch schon $(this) statt $(e.target).

Übrigens: Das aria-label-Attribut macht keinen Sinn, wenn da dasselbe steht wie im Elementinhalt. Das title-Attribut macht keinen Sinn, auch wenn da etwas anderes drinstünde.

Und „iteriert es wirklich über alle gefundenen Elemente in der gleichen Art?“ legt nahe, dass du sowas im Sinn hast:

<nav id="hamburger-navigation">
	<div>
		<ul>…</ul>
	</div>
	<div>
		<ul>…</ul>
	</div>
</nav>

Das geht. Bei den div-Elementen wird die Klasse open gesetzt bzw. entfernt.

Hast du aber

<nav id="hamburger-navigation">
		<ul>…</ul>
		<ul>…</ul>
</nav>

dann fliegt dir das Zeug um die Ohren.

LLAP 🖖