Зажигая кнопку, когда его контейнер будет скрыт [дублировать] ⇐ CSS

[Anonymous]

Я строю простое меню с коллекцией кнопок. Первая кнопка переключает класс, который используется Show или скрыть следующий Div, полный большего количества кнопок. Эта часть работает. < /P>
Хитрой является закрытие меню, когда я нажимаю. По разным вопросам, я получаю решение сделать следующее:

• Установка tabindex в контейнер меню. />

Эта часть также работает, , но кнопки больше не работают.
Я предполагаю, что onblur происходит первым, и что закрытие меню предотвращает увольнение кнопки. Если я отключите переключение класса, то кнопка уводит. Ничто не помогает. < /P>
Любые предложения о том, как я могу заставить кнопку для стрельбы, прежде чем меню закрывается?

Код: Выделить всё

let menu = document.querySelector('div#menu');
menu.setAttribute('tabindex',1);

let toggle = menu.querySelector('button#toggle');
toggle.onclick = event => {
toggle.classList.toggle('open');
menu.focus();
};

menu.querySelector('button#apple').onclick = event => {
console.log('apple');
};
menu.querySelector('button#banana').addEventListener('click', event => {
console.log('banana');
}, false);
menu.querySelector('button#cherry').addEventListener('click', event => {
console.log('cherry');
}, true);

//  hide when clicked off
menu.onblur = event => {
console.log('byebye');
toggle.classList.toggle('open', false);
};< /code>
div#menu {
position: relative;
button#toggle+div {
position: absolute;
display: none;
flex-direction: column;
}

button#toggle.open+div {
display: flex;
}
}< /code>

Things

Apple
Banana
Cherry


Some stuff

edit
Этот вопрос был закрыт как дубликат того, как предотвратить гонки между кликом и размытым событием? . < /p>
Конечно, это неправильно: < /p>

Этот вопрос конкретно использует угловые, в то время как мой ванильный javascript < /li>
Этот вопрос о двух независимых элементах, поэтому контекст отличается. < /li>
. /> < /ul>
Мое решение более подходящее для этого контекста и, безусловно, показывает, что я считаю лучшим подходом. < /p>

Подробнее здесь: https://stackoverflow.com/questions/797 ... -be-hidden