选择窗口 html

Question

我正在制作一个网站(html/css/javascript)，它就像一个餐厅助理，即用户可以订购食物，支付餐费，打电话给服务员，等等......我必须创建所有这些"菜单"，例如要订购食物，您单击"菜单"按钮并显示菜单，完成后它会隐藏。为此，我只是使用 javascript 更改显示属性，但对于每个窗口和每个按钮，我必须创建一个新功能来处理可见性和我现在拥有的功能数量，它太多了，有没有其他更简单的方法来制作这些菜单窗口(不制作不同的页面)？谢谢。

//open menu 1
document.getElementById('menu1').addEventListener('click', function(){
changeDisplay('menubutton','menu1');
});
//close menu 1
document.getElementById('menu1').addEventListener('click', function(){
changeDisplay('menu1','menubutton');
});
//open menu 2
document.getElementById('menu2').addEventListener('click', function(){
changeDisplay('menubutton2','menu2');
function changeDisplay(id1, id2) {
document.getElementById(id1).style.display = "flex";
document.getElementById(id2).style.display = "none";
}    

Answer 1

您可以使用 dom 选择器和 (data-) 属性来自动化该过程。

const openers = Array.from(document.querySelectorAll('[data-openMenuNumber]'));
openers.forEach(function(opener){
opener.onclick = () => {
document.querySelector('.show').classList.remove('show');
const num = opener.dataset.openmenunumber;
document.getElementById(`menu${num}`).classList.add('show');
}
});

.menu {
display: none;
}
.show {
display: initial;
}

<div id="menu1" class="menu show">
I'm menu1:<button data-openMenuNumber="2">open2</button>
</div>
<div id="menu2" class="menu">
I'm menu2:<button data-openMenuNumber="1">open1</button>
</div>

https://codepen.io/anon/pen/VbByvL

Answer 2

你可以做一个简单的函数，这样：

function showItem(itemName){
var items = document.getElementsByClassName('item');
Array.prototype.forEach.call(items, function(item){
item.style.display = "none";
});
document.getElementById(itemName).style.display = "block";
}

工作示例： https://codepen.io/anon/pen/WjKXLj