无法禁用classList更改

Question

我有几个链接，改变他们的颜色悬停。他们有“朗切斯特”班。下面是其中一个代码(它们是相同的)：

<div class="header__lang-container _flex-column-center nav__item-container">
                    <a href="" class="nav__simple-link header__lang lang-switcher">eng</a>
                    <ul class="lang-container">
                        <li><a href="" data-lang="eng" class="lang-container__eng lang-container__item">eng</a></li>
                        <li><a href="" data-lang="ukr" class="lang-container__ukr lang-container__item">ukr</a></li>
                    </ul>
                </div>

这是他们的造型。注意._is是活动的-简单的链接选择器，它会导致问题：

._is-active-simple-link {
    color: rgb(194, 190, 190);
}
    .nav__simple-link {
    transition: color .3s;
    font-weight: bold;
}

我要做的是在单击链接(保持链接处于活动状态)之后禁用这个类的切换，当我再次单击该链接时，应该再次启用悬停效果，但由于某种原因，这是行不通的。

const lang_switchers = document.querySelectorAll('.lang-switcher');
let isSwitcherOpen = false;
lang_switchers.forEach(elem => {
        elem.addEventListener('click', (e) => {
            e.preventDefault();
            if(!isSwitcherOpen) {
                hoveredLink();
                makeLinkInactive();
            }
            else {
                unhoveredLink();
                makeLinkActive();
            }
            isSwitcherOpen = !isSwitcherOpen;
        });

        makeLinkActive();

        function makeLinkActive() {
            elem.addEventListener('mouseover', hoveredLink);
            elem.addEventListener('mouseout', unhoveredLink);
        }

        function makeLinkInactive() {
            elem.removeEventListener('mouseover', hoveredLink);
            elem.removeEventListener('mouseout', unhoveredLink);
        }

        function hoveredLink() {
            elem.classList.add('_is-active-simple-link');
        }

        function unhoveredLink() {
            elem.classList.remove('_is-active-simple-link');
        }
    });

Answer 1

问题是您的mouseover事件不起作用。

试试这个：

现在应该再次启用悬停效果。

const lang_switchers = document.querySelectorAll('.lang-switcher');
var isSwitcherOpen = false;
lang_switchers.forEach(elem => {
    elem.addEventListener('click', (e) => {
        e.preventDefault();
        if (!isSwitcherOpen) {
            hoveredLink();
            makeLinkInactive();
        }
        else {
            unhoveredLink();
            makeLinkActive();
        }
    });

    window.addEventListener('mouseover',()=>{
        elem.classList.remove('_is-active-simple-link');
    });

    function hoveredLink() {
        elem.classList.add('_is-active-simple-link');
    }

    function unhoveredLink() {
        elem.classList.remove('_is-active-simple-link');
    }
});