Webサイトのワンクリックでの表示・非表示【JS・JQuery】

スマホサイトではPCに比べ表示スペースが少ないため普段は表示していないが、必要な時だけ表示する機能をよく見かける。（特にメニューバー）
PCでも同一の場所で画面を切り替える場合などで見かける。
かなりありきたりな機能ですが、自分なりの解釈で書いてみました。
よかったら読んでみてください！
また、より良い記述などありましたらコメントお願いします。^^
##はじめに
今回、用意しておくものとして、表示・非表示したいものの css の display で block と none を切り替えた時の見た目を整えておくといいと思います。
今回は display の block と none のみで表示・非表示を操作する。
display の部分は inline-block でも可能
##JS

JavaScript.js

document.getElementById('ワンクリックする部分のId名').onclick = function() {
  var menu = document.getElementById('表示・非表示させたい部分のId名');
  var GetDisplay = window.getComputedStyle(menu, null).getPropertyValue('display');
  if (GetDisplay == 'none') {
    menu.style.display = 'block';
  } else {
    menu.style.display = 'none';
  }
};

###ざっくり解説

• １行目
  • 挙動の起点となるワンクリックする部分をワンクリックされたら、後に書く記述の処理をする。という記述。
• 2行目
  • ワンクリックを受け、表示もしくは非表示させたい部分を取得する。
  • 取得したものを　menu(※好きな変数名で代用可能)　に代入する。
• ３行目
  • ２行目で取得した部分の display の状況を取得する。(冒頭に書いたように、今回はdisplayのみを使って表示・非表示を行う。)
  • 取得したことにより、表示もしくは非表示したい部分が、現在、表示されているのか ( block ) 、されていないのか ( none ) 、を確認することができる。
• 4行目
  • 3行目で取得したものを if 文で処理にかける。
  • この時 display が block や inline-block だと、どちらかで表示されるの２択になってしまうので、 none の方がおすすめ。 none だと表示されていないの１択になる。
• 5行目
  • 表示させたい部分が表示されていない場合（display が none）に css の display を block に書き換え表示する。
• 7行目
  • すでに表示されている場合、５行目と逆の動きで非表示にする。

##JQuery

JQuery.Js

$(function(){
  $('#ワンクリックする部分のId名').on('click', function(){
    var menu = $('#表示・非表示させたい部分のId名').css('display');
    if (menu == 'none') {
      $('#表示・非表示させたい部分のId名').css('display','block');
    } else {
      $('#表示・非表示させたい部分のId名').css('display','none');
    }
  });
});

###ざっくり解説

• １行目
  • JQuery 使います宣言みたいな記述。
• 2行目
  • 挙動の起点となるワンクリックする部分をワンクリックしたら、後に書く記述の処理をします。という内容。
• 3行目
  • ワンクリックを受け、表示もしくは非表示させたい部分の display を取得する。
  • 取得したことにより、表示もしくは非表示したい部分が、現在、表示されているのか ( block ) 、されていないのか ( none ) 、を確認することができるようになる。
  • 取得したものを menu ( ※好きな変数名で代用可能 )　に代入する。
• 4行目
  • 3行目で取得したものを if 文で処理にかける。
  • この時 display が block や inline-block だと、どちらかで表示されるの２択になってしまうので、 none の方がおすすめ。 none だと表示されていないの１択になる。
• 5行目
  • 表示させたい部分が表示されていない場合（display が none）に css の display を block に書き換え表示する。
• 7行目
  • すでに表示されている場合、５行目と逆の動きで非表示にする。

##最後に
if の中身をアニメーションにしたりするとただ表示されるだけでなく、スライドして出てきたり見た目を楽しくできるようになると思います。