Dynamically setting display to none does not work-CodePudding

I have a language select menu, which I want to be initially hidden, when a user clicks 'ENG' link, it should gradually appear. When a user clicks it again, menu should disappear. However, for some reason my setting class with 'display: none;' does not work... I also tried to set it directly through js: elem.style.display = "none"

My html:

<div >
                <a href="" >eng</a>
                <ul >
                    <li><a href="" >eng</a></li>
                    <li><a href="" >ukr</a></li>
                </ul>
</div>

My js:

    const lang_switcher = document.querySelector('.header__lang');
const lang_container = document.querySelector('.lang-container');
let isSwitcherOpen = false;
lang_switcher.addEventListener('click', (e) => {
    e.preventDefault();
    let opacity_value = 0;
    const atomic_value = 0.04;
    lang_switcher.classList.toggle('_is-active-simple-link');
    lang_container.classList.toggle('_hidden');
    if(!isSwitcherOpen) {
        lang_container.style.display = "block";
        const interval_id = setInterval(() => {
                if(opacity_value < 1) {
                    lang_container.style.opacity = opacity_value.toString();
                    opacity_value  = atomic_value;
                }
                else {
                    clearInterval(interval_id);
                }
        }, 10);
    }
    isSwitcherOpen = !isSwitcherOpen;
});

_hidden class:

._hidden {
    display: none;
}

CodePudding user response：

Delete lang_container.style.display = "block"; because it collides with lang_container.classList.toggle('_hidden');

    const lang_switcher = document.querySelector('.header__lang');
const lang_container = document.querySelector('.lang-container');
let isSwitcherOpen = false;
lang_switcher.addEventListener('click', (e) => {
    e.preventDefault();
    let opacity_value = 0;
    const atomic_value = 0.04;
    lang_switcher.classList.toggle('_is-active-simple-link');
    lang_container.classList.toggle('_hidden');
    if(!isSwitcherOpen) {
        const interval_id = setInterval(() => {
                if(opacity_value < 1) {
                    lang_container.style.opacity = opacity_value.toString();
                    opacity_value  = atomic_value;
                }
                else {
                    clearInterval(interval_id);
                }
        }, 10);
    }
    isSwitcherOpen = !isSwitcherOpen;
});

._hidden {
    display: none;
}

<div >
                <a href="" >eng</a>
                <ul >
                    <li><a href="" >eng</a></li>
                    <li><a href="" >ukr</a></li>
                </ul>
</div>

CodePudding user response：

You need to remove this line: lang_container.style.display = "block";

There's no need to set the display directly on the element since we are already toggling the _hidden class.