43 lines
1.2 KiB
JavaScript
43 lines
1.2 KiB
JavaScript
export function initDropdowns() {
|
|
const dropdowns = document.querySelectorAll('.dropdown');
|
|
|
|
dropdowns.forEach(dropdown => {
|
|
const trigger = dropdown.querySelector('.dropdown__trigger');
|
|
|
|
if (!trigger) return;
|
|
|
|
trigger.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
|
|
// Ferme les autres dropdowns ouverts
|
|
dropdowns.forEach(other => {
|
|
if (other !== dropdown) {
|
|
other.classList.remove('is-open');
|
|
other.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
|
|
}
|
|
});
|
|
|
|
// Toggle le dropdown actuel
|
|
dropdown.classList.toggle('is-open');
|
|
trigger.classList.toggle('is-selected');
|
|
});
|
|
});
|
|
|
|
// Ferme tous les dropdowns au clic extérieur
|
|
document.addEventListener('click', () => {
|
|
dropdowns.forEach(dropdown => {
|
|
dropdown.classList.remove('is-open');
|
|
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
|
|
});
|
|
});
|
|
|
|
// Ferme au press Escape
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') {
|
|
dropdowns.forEach(dropdown => {
|
|
dropdown.classList.remove('is-open');
|
|
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
|
|
});
|
|
}
|
|
});
|
|
}
|