javascript - 在下拉菜单中切换同一类的各个元素

Question

我正在构建一个下拉菜单。事实上，当我打开一个子菜单时，它会保持打开状态，即使我打开第二个子菜单也是如此。当我打开第二个子菜单时，它应该关闭所有其他打开的菜单。

const submenuLinks = document.querySelectorAll('.has-submenu > a');
submenuLinks.forEach(element => element.addEventListener('click', function(e) {
    var submenu = element.nextElementSibling;
    if (submenu.classList.contains('menu-hide')) { 
        submenu.classList.add('menu-show');
        submenu.classList.remove('menu-hide');
    } else {
        submenu.classList.add('menu-hide');
        submenu.classList.remove('menu-show');
    }
}));

.menu-hide {
    display: none;
}

.menu-show {
    display: block;
}

<nav>
    <ul class="menu">
        <li>
            <a href="#">Menu Item 1</a>
        </li>
        <li class="has-submenu">
            <a href="#">Menu Item 2 &raquo;</a>
            <ul class="menu-sub menu-hide">
                <li><a href="#">Submenu Item 1</a></li>
                <li><a href="#">Submenu Item 2</a></li>
                <li><a href="#">Submenu Item 3</a></li>
            </ul>
        </li>
        <li class="has-submenu">
            <a href="#">Menu Item 3 &raquo;</a>
            <ul class="menu-sub menu-hide">
                <li><a href="#">Submenu Item 1</a></li>
                <li><a href="#">Submenu Item 2</a></li>
                <li><a href="#">Submenu Item 3</a></li>
            </ul>
        </li>
    </ul>
</nav>

Answer 1

• 无需使用两个不同的类来显示和隐藏子菜单。
• 您可以使用 CSS 默认隐藏所有子菜单，只显示带有.menu-show

试试这个

const submenuLinks = document.querySelectorAll('.has-submenu > a');
submenuLinks.forEach(element => element.addEventListener('click', function(e) {
    var submenu = element.nextElementSibling;
    if (submenu.classList.contains('menu-show')) {
        submenu.classList.remove('menu-show');
    } else {
        submenuLinks.forEach(a => a.nextElementSibling.classList.remove('menu-show'));
        submenu.classList.add('menu-show');
    }
}));

.menu-sub {
    display: none;
}

.menu-show {
    display: block;
}

<nav>
    <ul class="menu">
        <li>
            <a href="#">Menu Item 1</a>
        </li>
        <li class="has-submenu">
            <a href="#">Menu Item 2 &raquo;</a>
            <ul class="menu-sub">
                <li><a href="#">Submenu Item 1</a></li>
                <li><a href="#">Submenu Item 2</a></li>
                <li><a href="#">Submenu Item 3</a></li>
            </ul>
        </li>
        <li class="has-submenu">
            <a href="#">Menu Item 3 &raquo;</a>
            <ul class="menu-sub">
                <li><a href="#">Submenu Item 1</a></li>
                <li><a href="#">Submenu Item 2</a></li>
                <li><a href="#">Submenu Item 3</a></li>
            </ul>
        </li>
    </ul>
</nav>