Как я могу иметь стрелку всплывающего меню, которая перемещается между указателями влево и вправо при наведении курсора ⇐ Jquery

[Anonymous]

У меня есть всплывающее меню, которое по умолчанию должно быть скрыто и появляться слева от кнопки запуска (красный кружок) при наведении курсора мыши и щелчке, вот так:



Вот код:

// HTML [*]

• [/i] Ежедневный сбор

// CSS #daily-muster-statuses-menu { непрозрачность: 0; видимость: скрыта; } #daily-muster-statuses:hover > #daily-muster-statuses-menu { непрозрачность: 1; видимость: видимая; } .dd-значок { внизу: 2,5 пикселей; слева: 12 пикселей; непрозрачность: 1; переход: линейное преобразование 0,1 с; } .outer-menu-item:hover .dd-icon { преобразование: поворот (180 градусов); } .show + #daily-muster-statuses-rollup .dd-icon { преобразование: нет; } // ЯС const musterStatusesRollup = $('#daily-muster-statuses-rollup'); const musterStatusesMenu = $('#daily-muster-statuses-menu'); const musterStatusesChevron = musterStatusesRollup.find('.dd-icon'); пусть менюIsShown = ложь; constideDailyMusterStatusesMenu = () => { musterStatusesChevron.removeClass('би-шеврон-право'). addClass('би-шеврон-влево'); musterStatusesMenu.removeClass('показать'); возврат (menuIsShown = ложь); }; const InitialiseDailyMusterStatusesMenu = () => { // Открытие контекстного меню статусов ежедневного сбора при нажатии на его свернутый значок в // правая боковая панель, затем сворачиваем ее при повторном щелчке по ней или щелчке в любом другом месте musterStatusesRollup.on('click', e => { если (menuIsShown) { вернуть скрытиеDailyMusterStatusesMenu(); } е.stopPropagation(); musterStatusesChevron.removeClass('би-шеврон-левый'). addClass('би-шеврон-право'); musterStatusesMenu.addClass('показать'); менюIsShown = правда; $(document).one('click',ideDailyMusterStatusesMenu); }); }; Это почти работает, но когда вы нажимаете на триггер li, шеврон перемещается во время выполнения связанного JS. Я хочу, чтобы при нажатии мыши браузер начинал вести себя так, как будто правило перехода CSS никогда не существовало, но сохранял шеврон, указывающий вправо, до тех пор, пока не будет поднята мышь и еще один полный щелчок, с любым количеством движений мыши между ними. Затем после второго щелчка шеврон должен снова переместиться влево.

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

РЕДАКТИРОВАТЬ: я снял короткое видео, демонстрирующее проблему