6 386
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 68: | Linha 68: | ||
} | } | ||
const allItems = dropdown.querySelectorAll('.dropdown-item'); | const allItems = dropdown.querySelectorAll('.dropdown-item'); | ||
let activeItem = document.querySelector('.dropdown-item.active'); | |||
if (event.key === 'ArrowDown') { | |||
// Remove a classe 'active' de todos os itens antes de navegar | |||
allItems.forEach(item => item.classList.remove('active')); | |||
if (activeItem) { | if (activeItem) { | ||
const nextItem = activeItem.nextElementSibling || | const nextItem = activeItem.nextElementSibling || allItems[0]; // Próximo item ou o primeiro | ||
nextItem.classList.add('active'); | nextItem.classList.add('active'); | ||
nextItem.scrollIntoView({ block: "nearest" }); | nextItem.scrollIntoView({ block: "nearest" }); | ||
} else { | } else { | ||
allItems[0].classList.add('active'); // Ativa o primeiro item | |||
allItems[0].scrollIntoView({ block: "nearest" }); | |||
} | } | ||
event.preventDefault(); // Evita comportamento padrão | event.preventDefault(); // Evita comportamento padrão | ||
} else if (event.key === 'ArrowUp') { | } else if (event.key === 'ArrowUp') { | ||
// Remove a classe 'active' de todos os itens antes de navegar | |||
allItems.forEach(item => item.classList.remove('active')); | |||
if (activeItem) { | if (activeItem) { | ||
const previousItem = activeItem.previousElementSibling || | const previousItem = activeItem.previousElementSibling || allItems[allItems.length - 1]; // Item anterior ou o último | ||
previousItem.classList.add('active'); | previousItem.classList.add('active'); | ||
previousItem.scrollIntoView({ block: "nearest" }); | previousItem.scrollIntoView({ block: "nearest" }); | ||
} else { | } else { | ||
allItems[allItems.length - 1].classList.add('active'); // Ativa o último item | |||
allItems[allItems.length - 1].scrollIntoView({ block: "nearest" }); | |||
} | } | ||
event.preventDefault(); | event.preventDefault(); | ||
} else if (event.key === 'Enter') { | } else if (event.key === 'Enter') { | ||
if (activeItem) { | if (activeItem) { | ||
activeItem.click(); // Simula | activeItem.click(); // Simula o clique no item ativo | ||
} | } | ||
event.preventDefault(); | event.preventDefault(); |