Javascript 在下拉菜单中切换同一类的单个元素

发布于04月18日

我正在建立一个下拉菜单.同样，当我打开一个子菜单时，它保持打开状态，即使我打开了第二个子菜单.当我打开第二个子菜单时，它应该会关闭任何其他打开的菜单.

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>

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'); } }));

<nav> <ul class="menu"> <li> <a href="#">Menu Item 1</a> </li> <li class="has-submenu"> <a href="#">Menu Item 2 »</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 »</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>

Javascript 在下拉菜单中切换同一类的单个元素

推荐答案

Javascript相关问答推荐

将音频记录从js发送到activx-web服务器以保存到磁盘

为什么这个自定义组件会被放置在TR之外？

如何提取Cypress中文本

对象和数字减法会抵消浏览器js中的数字

使用TMS Web Core中的HTML模板中的参数调用过程

我在这个黑暗模式按钮上做错了什么？

django无法解析余数：[0] from carray[0]'

调用removeEvents不起作用

JQuery. show()工作，但. hide()不工作

如何将Cookie从服务器发送到用户浏览器

将核心模块导入另一个组件模块时存在多个主题

Use Location位置成员在HashRouter内为空

如果一个字符串前面有点、空格或无字符串，后面有空格、连字符或无字符串，则匹配正则表达式

无法重定向到Next.js中的动态URL

使用自动识别发出信号(&Q)

如何在一个对象Java脚本中获取不同键的重复值？

Pevent触发material 用户界面数据网格中的自动保存

我无法在Api Reaction本机上发出GET请求

为什么我的SoupRequest"；被重置为初始值，以及如何修复它？

Chart.js Hover线条在鼠标离开时不会消失