隐藏/显示动态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

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

Answer 2

你正在使用jquery对吗?所以这一切都可以归结为

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