Close Native Dropdown

Utility
Dropdown
JS
  • Give any child of the dropdown an attribute name of data-dropdown-close to close the dropdown on click of that child
<script>
document.addEventListener("DOMContentLoaded", function () {
	document.addEventListener("click", (e) => {
		if (!e.target.closest("[data-dropdown-close]")) return;
		const dropdown = e.target.closest(".w-dropdown");
		dropdown?.dispatchEvent(new CustomEvent("w-close", { bubbles: true }));
		dropdown?.dispatchEvent(new CustomEvent("w-dropdown", { bubbles: true }));
	});
});
</script>
Last Updated: Dec 3, 2025
  • Give any child of the dropdown an attribute name of data-dropdown-close to close the dropdown on click of that child
<script>
document.addEventListener("DOMContentLoaded", function () {
	document.addEventListener("click", (e) => {
		if (!e.target.closest("[data-dropdown-close]")) return;
		const dropdown = e.target.closest(".w-dropdown");
		dropdown?.dispatchEvent(new CustomEvent("w-close", { bubbles: true }));
		dropdown?.dispatchEvent(new CustomEvent("w-dropdown", { bubbles: true }));
	});
});
</script>