Получить смещение верхней части баяна после коллапса

Question

Я пытаюсь получить абсолютную позицию названия аккордеона, по которому щелкнули, после нажатия.

Проблема в том, что движение коллапса аккордеона Bootstrap и мои jquery запускаются в значительной степени тот же момент. Происходит следующее: мой jquery получает смещение до , когда аккордеон свернут.

После того, как он свернут, заголовок может иметь еще один offsetTop после щелчка.

Есть ли способ пометить мои jquery после коллапса или немного подождать, чтобы аккордеон рухнул, и после этого запроса offsetTop?

const handle = document.querySelector('#handle');



const headers = document.querySelectorAll('.accordion')

   .forEach(el => {

       el.addEventListener('mouseover', e => {

           handle.style.top = `${e.currentTarget.offsetTop}px`;



   });

});

Вот пример

Как видно из примера, точка перемещается далеко вниз, если сначала открыть первый раздел, а после этого открыть второй.

Если щелкнуть второй раздел еще раз переместиться в нужное место

Answer 1

Если я понимаю ваш вопрос, вы можете использовать setTimeout (), чтобы дождаться завершения анимации

Примечание. Одна из проблем заключается в том, что мы не устанавливаем динамику времени ожидания c, поэтому она может не ощущаться. как отзывчивый.

    setTimeout(()=>{
        handle.style.top = `${e.target.offsetTop}px`;
    }, 200)