How to fix collapse delay?

Question

JavaScript

Good afternoon.
In bootstrap, the navbar collapses when a button is clicked.
The navigation bar has three states.
1. Rolled up.
2. During the event (collapsing).
3. Expanded.
On the button I have a click event in js, which toggles the active class, which changes the state of the button.
The essence of the problem is that my event changes as needed. Those. if I click on the button twice, then its animation will not have time to complete and will go in reverse order to its original state. But the bootstrap menu behaves differently when double-clicked. It does not respond to double click, i.e. collapsing will end anyway. From here there is a bug at a double click - the button in a state of the expanded menu, but the menu is minimized. How to solve this problem?

Answer 1

"Collapse" in bootstrap has events to help manage the state.
For example, you can hang an active class on the "shown.bs.collapse" event, and remove it on the "hidden.bs.collapse" event.

Answer 2

Everything is already written in bootstrap for you -- https://bootstrap-4.ru/docs/4.0/components/collapse/