选择窗口 html答案

【问题标题】：Selection windows html选择窗口 html
【发布时间】：2017-05-16 16:20:13
【问题描述】：

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

【问题讨论】：

您可以提供一段简短的代码摘录，以更好地阐明您的问题。
这是一个相当广泛的话题。你能缩小范围或缩小问题的范围吗？
简短回答：可重用代码应拆分并保存在自己的库中（例如 utils），整个 UI 应拆分为组件/模块，并在每个组件文件中保留事件处理程序。深入了解流行的 UI 库如何组织代码（React、Polymer）。我认为该模式称为PAC。

标签： javascript html css

【解决方案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

【讨论】：

这有帮助，它仍然是通过显示，但很简单。
在某些情况下你最好使用.off { display: none }类而不是.show，因为你可能需要display的自定义值（不仅仅是initial），但是它需要更多的代码。只需询问您是否需要它。

【解决方案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

【讨论】：