Javascript 选择窗口html

我正在制作一个网站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";
    }    

---

您可以执行以下简单的功能：

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";
}

工作示例：

---

您可以使用dom选择器和属性来自动执行该过程

常量openers=Array.fromdocument.querySelectorAll“[data openMenuNumber]”； 开瓶器。foreachFunction开瓶器{ opener.onclick==>{ document.querySelector.show.classList.remove'show'； const num=opener.dataset.openmenunumber； document.getElementById`menu${num}`.classList.add'show'； } }; .菜单{ 显示：无； } .表演{ 显示：首字母； } 我是menu1:open2 我是menu2:open1

---

您可以提供代码的简短摘录，以更好地阐明您的问题。这是一个相当广泛的主题。您可以缩小范围或缩小问题的范围吗？简短回答：可重用代码应该分离并保存在自己的库中，例如UTIL，整个UI应该拆分为组件/模块，并且您可以将事件处理程序保存在每个组件文件中。从流行的UI库如何组织代码反应中获得见解，Polymer。我认为模式是被调用的。这很有帮助，它仍然是通过显示实现的，但非常简单。在某些情况下，您最好使用.off{display:none}类而不是.show，因为您可能需要自定义显示值，而不仅仅是初始值，而且还需要稍多的代码。问问你是否需要它。