Q&A
function handle(mm) {
の中に
$(function() {
があって
$(".menu__item").on("click", function() {
や
$('.menu__item').hover(function() {
がある理由は？
前提・実現したいこと
ドロップダウンメニュー実装
発生している問題・エラーメッセージ
ドロップダウンリスト実装してるのですが、クリックしたときにメニューボックスが開きません。
ヘッダーのナビゲーションメニューですが768px以上の時は、ホバーした時にメニューボックスが出るように又、スマホ表示での時は（768px以下）ホバーではなくクリックするたびに開閉できるようにしたいです。
該当のソースコード
html
1<ul class="menu"> 2 <li class="menu__item"> 3 <a class="menu__item__a" href="">メニュー1</a> 4 <ul class="submenu"> 5 <li class="submenu__item"> 6 <a href="">サブメニュー1</a> 7 </li> 8 <li class="submenu__item"> 9 <a href="">サブメニュー2</a> 10 </li> 11 <li class="submenu__item"> 12 <a href="">サブメニュー3</a> 13 </li> 14 <li class="submenu__item"> 15 <a href="">サブメニュー4</a> 16 </li> 17 </ul> 18 </li> 19 <li class="menu__item"> 20 <a class="menu__item__a" href="">メニュー2</a> 21 <ul class="submenu"> 22 <li class="submenu__item"> 23 <a href="">サブメニュー1</a> 24 </li> 25 <li class="submenu__item"> 26 <a href="">サブメニュー2</a> 27 </li> 28 <li class="submenu__item"> 29 <a href="">サブメニュー3</a> 30 </li> 31 <li class="submenu__item"> 32 <a href="">サブメニュー4</a> 33 </li> 34 </ul> 35 </li> 36 <li class="menu__item"> 37 <a class="menu__item__a" href="">メニュー3</a> 38 <ul class="submenu"> 39 <li class="submenu__item"> 40 <a href="">サブメニュー1</a> 41 </li> 42 <li class="submenu__item"> 43 <a href="">サブメニュー2</a> 44 </li> 45 <li class="submenu__item"> 46 <a href="">サブメニュー3</a> 47 </li> 48 <li class="submenu__item"> 49 <a href="">サブメニュー4</a> 50 </li> 51 </ul> 52 </li> 53 <li class="menu__item"> 54 <a class="menu__item__a" href="">メニュー4</a> 55 <ul class="submenu"> 56 <li class="submenu__item"> 57 <a href="">サブメニュー1</a> 58 </li> 59 <li class="submenu__item"> 60 <a href="">サブメニュー2</a> 61 </li> 62 <li class="submenu__item"> 63 <a href="">サブメニュー3</a> 64 </li> 65 <li class="submenu__item"> 66 <a href="">サブメニュー4</a> 67 </li> 68 </ul> 69 </li> 70</ul>
css
1.menu{ 2 display: flex; 3 justify-content:center; 4} 5.menu__item { 6 width: 300px; 7 cursor: pointer; 8 display: block; 9 margin-bottom: 1px; 10 position: relative; 11 list-style: none; 12} 13.menu__item__a { 14 background: #eee; 15 padding: 1.5rem; 16 display: block; 17} 18.menu__item a{ 19 color: #333; 20 text-decoration: none; 21} 22.submenu { 23 background: #fff; 24 display: none; 25} 26.submenu__item { 27 border-bottom: 1px solid #500000; 28 color: #333; 29 padding: 1rem; 30 list-style: none; 31} 32 33@media(max-width: 768px) 34.menu{ 35 display: block; 36} 37.menu__item { 38 background: #520000; 39 cursor: pointer; 40 display: block; 41 margin-bottom: 1px; 42}
js
1const mediaQuery = window.matchMedia('(max-width: 768px)'); 2 handle(mediaQuery); 3 mediaQuery.addListener(handle); 4 function handle(mm) { 5 if (mm.matches) { 6 $(function() { 7 $(".menu__item").on("click", function() { 8 $(".submenu", this).slideToggle(); 9 }); 10 }); 11 } else { 12 $(function() { 13 $('.menu__item').hover(function() { 14 $(".submenu:not(:animated)", this).slideDown(); 15 }, function() { 16 $(".submenu", this).slideUp(); 17 }); 18 }); 19 } 20 }
現在の状況
768px以上では、きちんと実装できていますが、768px以下になった時にクリックしても開閉できません。
何か、js内で書き漏れているのでしょうか。よろしくお願い致します。
回答1件
0
メニュー(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()関数は↓こんな感じになると思います。
javascript
1function handle(mm) { 2 if (mm.matches) { 3 $(function() { 4 $(".menu__item").on("click", function() { 5 $(".submenu", this).slideToggle(); 6 }); 7 $(".menu__item").off("mouseenter mouseleave"); // ←これと 8 }); 9 } else { 10 $(function() { 11 $('.menu__item').hover(function() { 12 $(".submenu:not(:animated)", this).slideDown(); 13 }, function() { 14 $(".submenu", this).slideUp(); 15 }); 16 $(".menu__item").off("click"); // ←これ 17 }); 18 } 19}
投稿2021/02/20 13:40
編集2021/02/22 09:56
総合スコア1323
ありがとうございます。確かにhref"#"にしたところ、開閉しました。
しかし、hoverでもクリックでもどちらでも開閉してしまう状態です。。クリック指定にしたいのですが、ご教示いただけますでしょうか。
hoverの件、回答欄に補足しておきました。
768px以下の時にホバーを解除する、なるほどと思いながら、
$('.menu__item').off('mouseenter mouseleave');
上記を
$(function() {
$(".menu__item").on("click", function() {
$(".submenu", this).slideToggle();
$('.menu__item').off('mouseenter mouseleave');
});
});
の位置に入れてみましたが、実装できませんでした。。
上下位置を変えてみてもうまくいきません。
私が無知すぎて恥ずかしいのですが、｛｝など他の記号も使うのでしょうか。
ご丁寧に回答くださるのに、何度も質問をしてしまい、申し訳ありません(>_<)
handle()関数全体を回答欄に追記しました。
失礼ながら、質問文に掲載されたJSコード自体が理解できてないのかなぁ、という印象を受けました。もしそうであれば、まずは「○○サイトでこんなコードを見たんだけど、この部分はどういう意味でしょうか?」みたいな質問をしてみたら良かったかもしれませんね。できれば、JSの入門書(薄いやつでもOK)を1冊読んで基本文法を理解した上で…。
ご丁寧にコードを記述いただきありがとうございます。JSが理解できてない→その通りです。
転職した先にコードがわかるものがいなく、サイト制作をすることになってしまい、焦っておりました。
この先は勉強に励んでいく次第です。
上記ｊｓコードを追加し、hoverしてもメニューボックスは開かなくなりました。しかしクリックしても一瞬動くのですが、こちらも開かなくなってしまいました。ほかにも私の小さなミスのせいだと思います。
なかなか難しいです。
しかしここまで丁寧にご教示いただけて本当に感謝です。
ありがとうございました。
あなたの回答
tips
プレビュー
