我有一个弹出菜单，默认情况下应该是隐藏的，并出现在触发按钮（红色圆圈）的左侧，鼠标悬停和单击，像这样：

代码如下：

// HTML
<li id="daily-muster-statuses">
    <div id="daily-muster-statuses-menu" class="lpx-context-menu pb-0">
        <div class="lpx-user-ctx-body">
            <ul id="muster-status-list" class="lpx-nav-menu ps">
                <li id="muster-status-list-header" class="m-0 mb-2 outer-menu-item p-0">
                    <span id="muster-status-list-header-icon" class="lpx-menu-item-icon">
                        <i class="lpx-icon bi bi-card-checklist"></i>
                    </span>
                    <span class="lpx-menu-item-text">Daily Muster</span>
                </li>
            </ul>
        </div>
    </div>
    <ul id="daily-muster-statuses-rollup" class="lpx-nav-menu">
        <li class="m-0 outer-menu-item">
            <a class="d-block lpx-menu-item-link text-center">
                <i class="dd-icon bi bi-chevron-left" aria-hidden="true"></i>
                <i id="roll-up-status" class="fa fa-circle bg-rollup-waiting"></i>
            </a>
        </li>
    </ul>
</li>
// CSS
#daily-muster-statuses-menu {
    opacity: 0;
    visibility: hidden;
}
#daily-muster-statuses:hover > #daily-muster-statuses-menu {
    opacity: 1;
    visibility: visible;
}
.dd-icon {
    bottom: 2.5px;
    left: 12px;
    opacity: 1;
    transition: transform 0.1s linear;
}
.outer-menu-item:hover .dd-icon {
    transform: rotate(180deg);
}
.show + #daily-muster-statuses-rollup .dd-icon {
    transform: none;
}
// JS
const musterStatusesRollup = $('#daily-muster-statuses-rollup');
const musterStatusesMenu = $('#daily-muster-statuses-menu');
const musterStatusesChevron = musterStatusesRollup.find('.dd-icon');
let menuIsShown = false;
const hideDailyMusterStatusesMenu = () => {
    musterStatusesChevron.removeClass('bi-chevron-right').
        addClass('bi-chevron-left');
    musterStatusesMenu.removeClass('show');
    return (menuIsShown = false);
};
const initialiseDailyMusterStatusesMenu = () => {
    // Open the daily muster statuses context menu upon clicking its rollup icon in the
    // right sidebar, then collapse it when clicking it again or clicking anywhere else
    musterStatusesRollup.on('click', e => {
        if (menuIsShown) {
            return hideDailyMusterStatusesMenu();
        }
        e.stopPropagation();
        musterStatusesChevron.removeClass('bi-chevron-left').
            addClass('bi-chevron-right');
        musterStatusesMenu.addClass('show');
        menuIsShown = true;
        $(document).one('click', hideDailyMusterStatusesMenu);
    });
};

它几乎可以工作，但是当您单击触发器li时，chevron会在相关JS运行时四处移动。我希望它在鼠标按下时，浏览器开始表现得好像CSS转换规则从未存在过，但保持向右指向的V形，直到鼠标抬起和另一次完全单击之后，其间有任何数量的鼠标移动。然后，在第二次点击后，V形应该转换回左侧。
我在网上看到过很多类似的弹出菜单，看起来我把代码弄得太复杂了，所以如果有任何帮助的话，我会非常感激。
编辑：我做了一个short video that demonstrates the problem