如果存在多个，则删除HTML类

Question

我有一个问题：我可以打开多个下拉列表，因为HTML类'active'已添加到两个<li>元素中。因此，我试图找出关闭上次打开的下拉列表的方法。

这里是一些HTML：

        <nav>
        <ul>
            <li class="list"><a href="#">About</a></li>
            <li class="list sub-menu">
                <a href="#">Droplist</a>
                <ul>
                    <li><a href="#">item 1</a></li>
                    <li><a href="#">item 2</a></li>
                    <li><a href="#">item 3</a></li>
                    <li><a href="#">item 4</a></li>
                    <li><a href="#">item 5</a></li>
                    <li><a href="#">item 6</a></li>
                </ul>
            </li>
            <li class="list"><a href="#">Whatever</a></li>
            <li class="list sub-menu">
                <a href="#">Another Droplist</a>
                <ul>
                    <li><a href="#">item 1</a></li>
                    <li><a href="#">item 2</a></li>
                    <li><a href="#">item 3</a></li>
                    <li><a href="#">item 4</a></li>
                    <li><a href="#">item 5</a></li>
                    <li><a href="#">item 6</a></li>
                    <li><a href="#">item 7</a></li>
                    <li><a href="#">item 8</a></li>
                </ul>
            </li>
            <li class="list"><a href="#">Contact</a></li>
        </ul>
    </nav>

和一些JS代码：

window.onload = function dropDown() {
const list = document.querySelectorAll('.sub-menu');
for (let i = 0; i < list.length; i++) {
    list[i].addEventListener('click', function () {
        if (this.className != 'list sub-menu active') {
            this.classList.add('active');
            list.classList.remove('active');
        } else
            this.classList.remove('active');
    });
  }
};

我不知道如何正确检查一个以上类的存在（在DOM中）。你能建议点什么吗？

感谢您的关注！

Answer 1

document.querySelector（'。sub-menu.active'）。classList.remove（'active'）吗？

Answer 2

您可以执行以下操作：-