【jquery】クリックでドロップダウンメニューを開閉させる方法

疑問ちゃん

クリックするとメニューが出でくるドロップダウンメニューをどうやって作るの？

今回は、クリックすると子メニューが出てくるドロップダウンメニューについてご紹介します。

この記事を読めば、ドロップダウンメニューを作れるようになります。

ドロップダウンメニュー作成方法

さっそくなんですがサンプルコードを見ていきましょう。

サンプルコード

html構造

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="sample.css">
    <script src="sample.js"></script>
    <title>テスト</title>
</head>
<body>
<header>
  <div class="container">
    <div class="header_left">
      <h1>プログラミングクエスト</h1>
    </div>
    <div class="header_right">
      <ul class="menu_list">
        <li class="nav_item"><a href="#" class="js-dropdown">menu1</a>
          <div class="panel js-dropdown-menu">
            <ul class="panel-inner">
              <li class="panel_item"><a href="#">ドロップメニュー</a></li>
              <li class="panel_item"><a href="#">ドロップメニュー</a></li>
              <li class="panel_item"><a href="#">ドロップメニュー</a></li>
            </ul>
          </div>
        </li>
        <li class="nav_item"><a href="#" class="js-dropdown">menu2</a>
          <div class="panel js-dropdown-menu">
            <ul class="panel-inner">
              <li class="panel_item"><a href="#">ドロップメニュー</a></li>
              <li class="panel_item"><a href="#">ドロップメニュー</a></li>
              <li class="panel_item"><a href="#">ドロップメニュー</a></li>
            </ul>
          </div>
        </li>
        <li class="nav_item"><a href="#">menu3</a></li>
        <li class="nav_item"><a href="#">menu4</a></li>

      </ul>
    </div>
  </div>
</header>
</body>
</html>

css

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
}

ul, li {
  list-style: none;
}

a {
  text-decoration: none;
}

.container {
  width: 1180px;
  max-width: 100%;
  margin: 0 auto;
}

header {
  background: #6bb6ff;
}

header > .container {
  display: flex;
  align-items: center;
  height: 80px;
}

header .header_left h1 {
  color: #fff;
}

header .header_right {
  margin-left: 8em;
}

header .header_right .menu_list {
  display: flex;
  justify-content: space-around;
}

header .header_right .menu_list .nav_item {
  position: relative;
}

header .header_right .menu_list .nav_item .panel {
  position: absolute;
  top: 52px;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
  background: #6bb6fe;
  width: 100%;
  display: none;
}

header .header_right .menu_list .nav_item .panel .panel_item {
  display: inline-block;
  margin: 20px 0;
}

header .header_right .menu_list .nav_item .panel .panel_item a {
  color: #fff;
}

header .header_right .menu_list .nav_item {
  display: block;
  width: 150px;
  text-align: center;
}

header .header_right .menu_list .nav_item a {
  color: #fff;
}

jquery

$(function(){
  var $dropdown = $('.js-dropdown');
  var DURATION = 200; //アニメーションの速さ

  function fadeOutMenu(){
    $dropdown.removeClass('is-active')
      .next('.js-dropdown-menu')
      .stop()
      .slideUp(DURATION);
  }

  //表示を切り替える
  function toggleMenu(){
    var $self = $(this); //thisにはクリックした時の要素が入る
    //要素が.is-activeを持っていない場合
    if(!$self.hasClass('is-active')){
      fadeOutMenu();
    }
    //クリックした要素を表示させる
    $self.toggleClass('is-active')
      .next('.js-dropdown-menu')
      .stop().slideToggle(DURATION);
  }

  $dropdown.on('click', toggleMenu);
 
//別の場所をクリックすると閉じる処理
  $(document).on('click touchend', function(event) {
  if (!$(event.target).closest('body').length) {
    // ここに処理;
    fadeOutMenu();//関数呼びだし
  }
});
  });

htmlとcssの解説は割愛させていただきます。

jqueryのコードについて順番に解説していきます。

var $dropdown = $('.js-dropdown'); var DURATION = 200; //アニメーションの速さ

まず共通で利用するものには変数として格納しています。

疑問ちゃん

なぜ変数として定義するの？

複数回使用するオブジェクトは、変数として利用することで処理を軽くすることができるからです。

このDURATIONという変数に入ってる２００という数字はアニメーションの速さです。

次に下記のコードです。

function fadeOutMenu()

{ $dropdown.removeClass('is-active')

.next('.js-dropdown-menu')

.stop() .slideUp(DURATION); }

上記のコードはドロップダウンメニューを非表示にする関数です。

変数を定義したdropdownに対してremoveClassでis-activeを取り除きます。

nextメソッドで兄弟要素の子メニューを取得して、現在実行されているアニメーションをSTOPメソッドで停止し、slideUpメソッドでメニューを閉じます。

次にこちらのコードです。

function toggleMenu(){ var $self = $(this); //thisにはクリックした時の要素が入る

//要素が.is-activeを持っていない場合 if(!$self.hasClass('is-active')){

fadeOutMenu(); }

//クリックした要素を表示させる

$self.toggleClass('is-active') .next('.js-dropdown-menu') .stop().slideToggle(DURATION); }

ドロップダウンの表示、非表示を切り替える関数です。

thisを変数に格納をします。thisとはクリックされた要素です。

次にクリックされた要素が子メニューを表示しているどうかを、is-activeというクラスを持っているかどうかでチェックします。表示してない場合他の表示しているメニューを非表示にします。

最後にクリックされた要素に対して表示、非表示の切り替えをおこないます。

クリックされた要素$serfに対して、toggleClassを使って追加・削除をおこないます。

次にnextメソッドでクリックされた要素の兄弟要素子メニューを取得してslideToggleメソッドで表示の切り替えをおこなってます。

$dropdown.on('click', toggleMenu);

//別の場所をクリックすると閉じる処理 $(document).on('click touchend', function(event) { if (!$(event.target).closest('body').length) { // ここに処理; fadeOutMenu();//関数呼びだし } });

最後にクリックされた時のイベントとメニュー以外の別のところがクリックされたら子メニューを閉じる処理を書いて完了です。