javascript - 选择窗口 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