隐藏/显示具有动态ID的字段(NodeJS、Mongoose、Express、Javascript)

Question

我有一个forEach循环，它在单击餐厅图标时显示不同餐厅的菜单。餐厅图标和餐厅/菜单的数量是未知的，每个都是用动态ID创建的，例如menu-0、menu-1、menu-2等。

当一个餐厅图标被点击时，所有其他的都应该被隐藏。目前我有以下Javascript显示/隐藏菜单；虽然这是工作的，我正在努力使它更动态/更有效的方法，而不是静态列表，因为菜单的数量是未知的。

let menu0 = document.getElementById('menu-0');
let menuIcon1 = document.getElementById('menu-icon-1');
let menu1 = document.getElementById('menu-1');
let menuIcon2 = document.getElementById('menu-icon-2');
let menu2 = document.getElementById('menu-2');
let menuIcon3 = document.getElementById('menu-icon-3');
let menu3 = document.getElementById('menu-3');
let menuIcon4 = document.getElementById('menu-icon-4');
let menu4 = document.getElementById('menu-4');

$('#menu-icon-0').on('click', function(e) {
    if (menu0.style.display = 'none') {
        menu0.style.display = 'block';
        menuIcon0.style.border = '5px solid #2541B2';

        menuIcon1.style.border = 'none';
        menu1.style.display = 'none';
        menuIcon2.style.border = 'none';
        menu2.style.display = 'none';
        menuIcon3.style.border = 'none';
        menu3.style.display = 'none';
        menuIcon4.style.border = 'none';
        menu4.style.display = 'none';
    }
})

$('#menu-icon-1').on('click', function(e) {
    if (menu1.style.display = 'none') {
        menu1.style.display = 'block';
        menuIcon1.style.border = '5px solid #2541B2';
        
        menuIcon0.style.border = 'none';
        menu0.style.display = 'none';
        menuIcon2.style.border = 'none';
        menu2.style.display = 'none';
        menuIcon3.style.border = 'none';
        menu3.style.display = 'none';
        menuIcon4.style.border = 'none';
        menu4.style.display = 'none';
    }
})```

Answer 1

您正在使用jquery，对吗？所以这一切都可以归结为

$('#menu-icon-0').on('click', function(e) {

  $('#menu-icon-0').toggle()
}

Answer 2

根据我的经验，您必须添加自定义类到您的动态元素，然后您可以设置click在类名，并在click中搜索所有元素有这个类，使for循环和比较元素的id与点击的视图id如果不等于，您应该隐藏边界。