ドロップダウンメニュー クリックで開かない

Question

前提・実現したいこと

ドロップダウンメニュー実装

発生している問題・エラーメッセージ

ドロップダウンリスト実装してるのですが、クリックしたときにメニューボックスが開きません。
ヘッダーのナビゲーションメニューですが768px以上の時は、ホバーした時にメニューボックスが出るように又、スマホ表示での時は（768px以下）ホバーではなくクリックするたびに開閉できるようにしたいです。

該当のソースコード

<ul class="menu">
    <li class="menu__item">
      <a class="menu__item__a" href="">メニュー1</a>
        <ul class="submenu">
          <li class="submenu__item">
           <a href="">サブメニュー1</a>
          </li>
          <li class="submenu__item">
            <a href="">サブメニュー2</a>
          </li>
          <li class="submenu__item">
            <a href="">サブメニュー3</a>
          </li>
          <li class="submenu__item">
            <a href="">サブメニュー4</a>
          </li>
        </ul>
    </li>
    <li class="menu__item">
       <a class="menu__item__a" href="">メニュー2</a>
        <ul class="submenu">
          <li class="submenu__item">
           <a href="">サブメニュー1</a>
          </li>
          <li class="submenu__item">
            <a href="">サブメニュー2</a>
          </li>
          <li class="submenu__item">
            <a href="">サブメニュー3</a>
          </li>
          <li class="submenu__item">
            <a href="">サブメニュー4</a>
          </li>
        </ul>
    </li>
     <li class="menu__item">
        <a class="menu__item__a" href="">メニュー3</a>
        <ul class="submenu">
          <li class="submenu__item">
           <a href="">サブメニュー1</a>
          </li>
          <li class="submenu__item">
            <a href="">サブメニュー2</a>
          </li>
          <li class="submenu__item">
            <a href="">サブメニュー3</a>
          </li>
          <li class="submenu__item">
            <a href="">サブメニュー4</a>
          </li>
        </ul>
    </li>
     <li class="menu__item">
        <a class="menu__item__a" href="">メニュー4</a>
        <ul class="submenu">
          <li class="submenu__item">
           <a href="">サブメニュー1</a>
          </li>
          <li class="submenu__item">
            <a href="">サブメニュー2</a>
          </li>
          <li class="submenu__item">
            <a href="">サブメニュー3</a>
          </li>
          <li class="submenu__item">
            <a href="">サブメニュー4</a>
          </li>
        </ul>
    </li>
</ul>

.menu{
    display: flex;
    justify-content:center;
}
.menu__item {
  width: 300px;
  cursor: pointer;
  display: block;
  margin-bottom: 1px;
  position: relative;
  list-style: none;
}
.menu__item__a {
    background: #eee;
    padding: 1.5rem;
    display: block;
}
.menu__item a{
    color: #333;
    text-decoration: none;
}
.submenu {
  background: #fff;
  display: none;
}
.submenu__item {
  border-bottom: 1px solid #500000;
  color: #333;
  padding: 1rem;
  list-style: none;
}

@media(max-width: 768px)
.menu{
  display: block;
}
.menu__item {
  background: #520000; 
  cursor: pointer;
  display: block;
  margin-bottom: 1px;
}

const mediaQuery = window.matchMedia('(max-width: 768px)');
  handle(mediaQuery);
  mediaQuery.addListener(handle);
  function handle(mm) {
    if (mm.matches) {
      $(function() {
        $(".menu__item").on("click", function() {
          $(".submenu", this).slideToggle();
        });
      });
    } else {
      $(function() {
        $('.menu__item').hover(function() {
          $(".submenu:not(:animated)", this).slideDown();
        }, function() {
          $(".submenu", this).slideUp();
        });
      });
    }
  }

現在の状況

768px以上では、きちんと実装できていますが、768px以下になった時にクリックしても開閉できません。
何か、js内で書き漏れているのでしょうか。よろしくお願い致します。

Comments

[m.ts10806]

function handle(mm) {
の中に
$(function() {
があって
$(".menu__item").on("click", function() {
や
$('.menu__item').hover(function() {
がある理由は？

[nakamura__]

下記サイトを参考にしています。
https://www.marukin-ad.co.jp/marulog/?p=2961
何か間違っていますでしょうか。

Answer 1

メニュー(a)のhref属性値が""なので、クリックするたびにページがリロードされてるんだと思います。

たとえば、<a class="menu__item__a" href="#">メニュー4</a>などとすれば、ちゃんとサブメニューが開閉しましたよ。

---

[コメントを受けて、hoverの件などについて補足]

失礼しました、hoverのことはスルーしてました(私はタッチデバイスで試してたので)。

1度でもビューポート幅が768pxを超えるとhoverハンドラが仕込まれてしまうので、その後、たとえ768px以下になったとしてもhoverイベントに反応してしまうんだと思います。768px以下になったときにhoverハンドラを解除してみたらどうでしょうか? 解除方法は $('.menu__item').off('mouseenter mouseleave'); です(詳しくはマニュアル(https://api.jquery.com/hover/)参照)。

同様に、768px以上になったら、クリックイベントを解除する必要がありますね。

---

[コメントを受けて、改修例を追加]

改修後のhandle()関数は↓こんな感じになると思います。

function handle(mm) {
  if (mm.matches) {
    $(function() {
      $(".menu__item").on("click", function() {
        $(".submenu", this).slideToggle();
      });
      $(".menu__item").off("mouseenter mouseleave");  // ←これと
    });
  } else {
    $(function() {
      $('.menu__item').hover(function() {
        $(".submenu:not(:animated)", this).slideDown();
      }, function() {
        $(".submenu", this).slideUp();
      });
      $(".menu__item").off("click");                  // ←これ
    });
  }
}

Comments

[nakamura__]

ありがとうございます。確かにhref"#"にしたところ、開閉しました。
しかし、hoverでもクリックでもどちらでも開閉してしまう状態です。。クリック指定にしたいのですが、ご教示いただけますでしょうか。

[gpsoft]

hoverの件、回答欄に補足しておきました。

[nakamura__]

768px以下の時にホバーを解除する、なるほどと思いながら、
$('.menu__item').off('mouseenter mouseleave');
上記を
$(function() {
$(".menu__item").on("click", function() {
$(".submenu", this).slideToggle();
　　　　$('.menu__item').off('mouseenter mouseleave');
});
});
の位置に入れてみましたが、実装できませんでした。。
上下位置を変えてみてもうまくいきません。
私が無知すぎて恥ずかしいのですが、｛｝など他の記号も使うのでしょうか。
ご丁寧に回答くださるのに、何度も質問をしてしまい、申し訳ありません(>_<)

[gpsoft]

handle()関数全体を回答欄に追記しました。

失礼ながら、質問文に掲載されたJSコード自体が理解できてないのかなぁ、という印象を受けました。もしそうであれば、まずは「○○サイトでこんなコードを見たんだけど、この部分はどういう意味でしょうか?」みたいな質問をしてみたら良かったかもしれませんね。できれば、JSの入門書(薄いやつでもOK)を1冊読んで基本文法を理解した上で…。

[yuko2430]

ご丁寧にコードを記述いただきありがとうございます。JSが理解できてない→その通りです。
転職した先にコードがわかるものがいなく、サイト制作をすることになってしまい、焦っておりました。
この先は勉強に励んでいく次第です。
上記ｊｓコードを追加し、hoverしてもメニューボックスは開かなくなりました。しかしクリックしても一瞬動くのですが、こちらも開かなくなってしまいました。ほかにも私の小さなミスのせいだと思います。
なかなか難しいです。
しかしここまで丁寧にご教示いただけて本当に感謝です。
ありがとうございました。