グローバルナビゲーションのjs（クリックとマウスオーバー）

nav.js

// 1.グローバルナビゲーション（マウスオーバーVer.）
// `.find()`で要素を取得（高速化）。
// 使用するclassを変数化して保守性と速度を上げる。
$(function(){
  var $nav = $('.global-nav').find('> li');
  var $navAll = $nav.find('ul');
  var state = 'is-active';

  $nav.hover(
    function() {
      $navAll.removeClass(state);
      $(this).find('ul').addClass(state);
    },
    function() {
      $(this).find('ul').removeClass(state);
    }
  );
});

// 1.グローバルナビゲーション（クリックVer.）
// クリックした要素の子要素にステートクラスが付いていたら取り除く。
// ステートクラスが付いていない場合もいったん取り除いて、
// クリックした要素の子要素にだけステートクラスを付け直す。
$(function() {
  var $nav = $('.global-nav').find('> li');
  var $navAll = $('.global-nav').find('ul');
  var state = 'is-active';

  $nav.click(function() {
    var $currentList = $(this).find('ul');

    if($currentList.hasClass(state)) {
      $navAll.removeClass(state);
    } else {
      $navAll.removeClass(state);
      $currentList.addClass(state);
    }
  });
});

// 1.グローバルナビゲーション
// `.global-nav`以外をクリックしたら、
// ナビゲーション用のステートクラスを削除する。
$(document).click(function(event) {
    if (!$.contains($(".global-nav")[0], event.target)) {
        $('.global-nav').find('ul').removeClass('is-active');
    }
});