Как заставить работать по-быстрому:function navFunction(id) {
for (const n of document.querySelectorAll('.dropdown2-content')) {
n.classList[n.id === id ? 'toggle' : 'remove']('show');
}
}
Но вообще, тут многое можно изменить:
Разметка - вырезать инлайновые обработчики клика и атрибуты id.
Стили - будем плясать от корневых элементов (так удобнее; кроме того, если в будущем захотите стилизовать в "открытом" дропдауне что-то кроме контента, то не будет необходимости добавлять этим элементам классы, и, соответственно, не придётся переписывать код):
.dropdown2 .dropdown2-content {
display: none;
}
.dropdown2.show .dropdown2-content {
display: block;
}
Код - вместо id будет смотреть на взаимное расположение элементов (переключаем класс у предка нажатой кнопки, у остальных удаляем):
const containerSelector = '.dropdown2';
const buttonSelector = `${containerSelector} .dropbtn2`;
const activeClass = 'show';
// делегирование, назначаем обработчик клика один раз для всех кнопок
document.addEventListener('click', e => {
const button = e.target.closest(buttonSelector);
if (button) {
document.querySelectorAll(containerSelector).forEach(function(n) {
n.classList[n === this ? 'toggle' : 'remove'](activeClass);
}, button.closest(containerSelector));
}
});
// или, назначаем обработчик клика каждой кнопке индивидуально
const onClick = function({ currentTarget: t }) {
this.forEach((n, i) => n.classList[n.contains(t) ? 'toggle' : 'remove'](activeClass));
}.bind(document.querySelectorAll(containerSelector));
document.querySelectorAll(buttonSelector).forEach(n => {
n.addEventListener('click', onClick);
});
