選択ウィンドウ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-）の属性を使用してプロセスを自動化することが https://codepen.io/anon/pen/WjKXLj

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

実施例を。

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