[Cine Library] 3. ドロップダウン・メニューの作成

上の写真のようなドロップダウンメニューを作ります.
まずhtmlをフレームワークとして利用する.

<div class=dropdown id="menu">All</div>
  <div class=close id="boxopen">
    <div class="content_box">
     <div class=content1>Movie</div>
     <div class=content2>Drama</div>
    </div>
   </div>

<div class=close id="boxopen">

「close」クラスに「none」と表示されます.を選択して、メニューの下部を非表示にします.
jsクリックでdropdownが実行され、再度クリックするとdropupします.

document.getElementById('menu').onclick = function(){
  var element = document.getElementById("boxopen");
    if (element.classList.contains("close")){
      element.classList.remove("close");
      } else {
         element.classList.add("close");
        }
}
 

上のjsコードの行ごとの説明:

document.getElementById('menu').onclick = function()

すなわち、id=「menu」のelementをクリックすると、次の関数が実行されます.

var element = document.getElementById("boxopen");

id=boxopenセクションをelementとして宣言します.

if (element.classList.contains("close")){
      element.classList.remove("close");
      } 

要素にcloseクラスがある場合は削除します(display:none;部分ドロップダウンをキャンセル)

else {
         element.classList.add("close");
        }

また、「close」クラス(ドロップダウン済み)がない場合は、「close」クラスを挿入します.
(display:none;)
codepen
上のcodepenを押すと作業物が見えます.