Question

我正在制作一个像餐馆助理一样工作的网站（html / css / javascript），即用户可以订购食物，支付餐费，给服务员打电话等等......我必须创建所有这些“菜单”，例如订购食物，点击“菜单”按钮，菜单出现，当你完成它隐藏。为此我只是用javascript更改display属性但是对于每个窗口和每个按钮我必须创建一个新函数来处理可见性和我现在所拥有的函数量太多了，有没有其他更简单的方法制作这些菜单窗口（不做不同的页面）？感谢。

    //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

选择窗口html

2 个答案: