レスポンシブ時にPC/SPで、アコーディオンメニューの挙動を変えたい。検証

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<body>
  <div class="header-bottom">
    <nav class="gnav mainnav" id="globalMenu">
      <ul class="list" id="menu">
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
        <li class="product-child"><span class="click-btn">C</span>
          <ul class="menu-hidden child-list">
            <li><a href="#">D</a></li>
            <li><a href="#">E</a></li>
            <li><a href="#">F</a></li>
          </ul>
        </li>
        <li><a href="#">G</a></li>
      </ul>
    </nav>
  </div>

  <div id="test_area">
    <p1>test</p1>
  </div>
</body>

CSS

.click-btn {
  background-color: white;
}

.menu-hidden {
  display: none;
}

.child-list.open01 {
  display: block;
}

JavaScript

$(function() {

  // 各イベントで利用するためにこの位置で定義
  var over_flg = true;

  $(document).on("click", ".click-btn", function(ev) {
    // イベントの伝播を防ぐ
    ev.stopPropagation();

    // ev.target がイベントの起こった要素
    var l = $(ev.target).parents('#globalMenu').length;

    if (l > 0) { // メニュー内のイベントか判定
      // ここではPC・SPは関係ないのでクラスの付与・除去のみを行う
      $('.child-list').toggleClass('open01');
    }
  });

  // ここでhoverイベントを設定(PCのみ動作する)
  $('.product-child .click-btn,.child-list').hover(function() {
    over_flg = true;
  }, function() {
    over_flg = false;
  });

  // メニュー領域外をクリックしたらメニューを閉じる
  $('body').click(function() {
    if (window.innerWidth > 768) { // ウィンドウサイズからPC・SPを判定
      if (over_flg == false) {
        $('.child-list').removeClass('open01');
      }
    }
  });
});