Как снять класс с выпадающего списка при переключении?

Question

[svm2001]

У меня есть dropdown списки, которые открываются по щелчку и закрываются либо по клику на свободную область, либо на заголовок этого же списка, либо на заголовок другого списка. Заголовку списка при открытом виде я даю класс 'active'. Смог сделать так, чтобы при клике на свободную область этот класс исчезал, также смог сделать так, чтобы при клике на этот же заголовок класс тоже исчезал. Я не пойму как мне сделать так, чтобы при нажатии на другой заголовок другого списка у меня с текущего этот класс убирался.

<div class="dropdown_wrapper">
        <div class="dropdown">
            <button data-path="one" class="btn btn-secondary dropdown-toggle">
              1 список
            </button>
            <ul data-target="one" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <li><a class="dropdown-item" href="#">1</a></li>
              <li><a class="dropdown-item" href="#">2</a></li>
              <li><a class="dropdown-item" href="#">3</a></li>
            </ul>
        </div>

        <div class="dropdown">
            <button data-path="two" class="btn btn-secondary dropdown-toggle">
              2 список
            </button>
            <ul data-target="two" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <li><a class="dropdown-item" href="#">1</a></li>
              <li><a class="dropdown-item" href="#">2</a></li>
              <li><a class="dropdown-item" href="#">3</a></li>
            </ul>
        </div>

        <div class="dropdown">
            <button data-path="three" class="btn btn-secondary dropdown-toggle">
              3 список
            </button>
            <ul data-target="three" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <li><a class="dropdown-item" href="#">1</a></li>
              <li><a class="dropdown-item" href="#">2</a></li>
              <li><a class="dropdown-item" href="#">3</a></li>
            </ul>
        </div>
    </div>

let intervalId;

document.querySelectorAll('.dropdown-toggle').forEach(e => {
    e.addEventListener('click', e => {
        const menu = e.currentTarget.dataset.path;
        document.querySelectorAll('.dropdown-menu').forEach(e => {
            if (!document.querySelector(`[data-target=${menu}]`).classList.contains('open')) {
                e.classList.remove('menu-active');
                e.classList.remove('open');
                document.querySelector(`[data-target=${menu}]`).classList.add('menu-active');
                document.querySelector(`[data-target=${menu}]`).closest('.dropdown').classList.add('active');
                intervalId = setTimeout(() => {
                    document.querySelector(`[data-target=${menu}]`).classList.add('open');
                }, 0);
            }

            if (document.querySelector(`[data-target=${menu}]`).classList.contains('open')) {
                clearTimeout(intervalId);
                document.querySelector(`[data-target=${menu}]`).classList.remove('menu-active');
                intervalId = setTimeout(() => {
                    document.querySelector(`[data-target=${menu}]`).classList.remove('open');
                }, 0);
            }

            window.onclick = e => {
                if (e.target == document.querySelector(`[data-target=${menu}]`) || e.target == document.querySelector(`[data-path=${menu}]`)) {
                    return;
                } else {
                    document.querySelector(`[data-target=${menu}]`).classList.remove('menu-active');
                    document.querySelector(`[data-target=${menu}]`).classList.remove('open');
                    document.querySelector(`[data-target=${menu}]`).closest('.dropdown').classList.remove('active');
                }
            }
        });
    });
});

Comments

[Дмитрий]

let intervalId;
const dropDown = document.querySelectorAll('.dropdown'); //Находим все классы dropdown
document.querySelectorAll('.dropdown-toggle').forEach(e => {
    e.addEventListener('click', e => {
        const menu = e.currentTarget.dataset.path;
        document.querySelectorAll('.dropdown-menu').forEach(e => {
            if (!document.querySelector(`[data-target=${menu}]`).classList.contains('open')) {
                e.classList.remove('menu-active');
                e.classList.remove('open');
                document.querySelector(`[data-target=${menu}]`).classList.add('menu-active');
                dropDown.forEach(e => { //Удаляем все классы active перед добавлением клааса на элемент который кликнули
                  e.classList.remove('active');
                });
                document.querySelector(`[data-target=${menu}]`).closest('.dropdown').classList.add('active');
                intervalId = setTimeout(() => {
                    document.querySelector(`[data-target=${menu}]`).classList.add('open');
                }, 0);
            }

            if (document.querySelector(`[data-target=${menu}]`).classList.contains('open')) {
                clearTimeout(intervalId);
                document.querySelector(`[data-target=${menu}]`).classList.remove('menu-active');
                intervalId = setTimeout(() => {
                    document.querySelector(`[data-target=${menu}]`).classList.remove('open');
                }, 0);
            }

            window.onclick = e => {
                if (e.target == document.querySelector(`[data-target=${menu}]`) || e.target == document.querySelector(`[data-path=${menu}]`)) {
                    return;
                } else {
                    document.querySelector(`[data-target=${menu}]`).classList.remove('menu-active');
                    document.querySelector(`[data-target=${menu}]`).classList.remove('open');
                    document.querySelector(`[data-target=${menu}]`).closest('.dropdown').classList.remove('active');
                }
            }
        });
    });
});

Попробуйте так.