Q&A
###前提・実現したいこと
レスポンシブデザインの制作にて、
ナビゲーション部分の動作がうまくいかずに困っておりますので、助けていただけると幸いです。
よろしくお願い致します。
ナビゲーション部分ですが、
【 PCレイアウトの場合 】
各ナビゲーションにマウスオーバーすると、ポップアップでサブナビゲーションを表示
【 スマホレイアウトの場合 】
各ナビゲーションをクリックすると、アコーディオン形式でサブナビゲーションを表示
の様に動作させたいのですが、
PCレイアウトの際は動作に問題ないのですが、
スマホレイアウトになりますと、クリックではなくマウスオーバーでサブナビゲーションが表示されてしまいます。
また、ナビゲーションをクリックしますと、開いたり・閉じたりを繰り返してしまいます。
現状のコードは以下となっております。
html
1<div id="gnav"> 2 <nav> 3 <ul> 4 <li class="popup"><a href="" class="trigger"><span>ナビゲーション_a</span></a> 5 <div class="drop gNavSub"> 6 <div id="gns1" class="gnSubInner"> 7 <div class="gnsBox clf"> 8 <p class="gnTop"><a href="">aのサブナビゲーション</a></p> 9 <ul class="gnsList"> 10 <li class="gnNews1"><a href="">aのサブナビゲーション</a></li> 11 <li class="gnNews2"><a href="">aのサブナビゲーション</a></li> 12 <li class="gnNews3"><a href="">aのサブナビゲーション</a></li> 13 </ul> 14 </div> 15 </div> 16 </div> 17 </li> 18 <li class="popup"><a href="" class="trigger"><span>ナビゲーション_b</span></a> 19 <div class="drop gNavSub"> 20 <div id="gns1" class="gnSubInner"> 21 <div class="gnsBox clf"> 22 <p class="gnTop"><a href="">bのサブナビゲーション</a></p> 23 <ul class="gnsList"> 24 <li><a href="">bのサブナビゲーション</a></li> 25 <li><a href="">bのサブナビゲーション</a></li> 26 <li><a href="">bのサブナビゲーション</a></li> 27 <li><a href="">bのサブナビゲーション</a></li> 28 </ul> 29 </div> 30 </div> 31 </div> 32 </li> 33 <li><a href="">ナビゲーション_c</a></li> 34 </ul> 35 <p><a href="">ナビゲーション_d</a></p> 36 </nav> 37</div>
javascript
1$(function() { 2 3 setSize(); 4 5 $(window).resize(function() { 6 setSize(); 7 }); 8 9}); 10 11function setSize() { 12 13 var w = $(window).width(); 14 var x = 765; 15 16 //765px以下の場合 17 if (w <= x) { 18 19 //gNav 20 $(function(){ 21 //以下、スマホレイアウトの際のハンバーガーメニューの表示・非表示の切り替えとなります。 22 $('nav').css('display', 'none'); 23 $('#spNav').click(function () { 24 $('#spNav').css('display', 'none'); 25 $('#spClose').css('display', 'block'); 26 $('nav').fadeIn(200); 27 }); 28 $('#spClose').click(function () { 29 $('#spNav').css('display', 'block'); 30 $('#spClose').css('display', 'none'); 31 $('nav').fadeOut(200); 32 }); 33 34 //以下、スマホレイアウトの際のアコーディオン形式でサブナビゲーションを表示・非表示の切り替えとなります。 35 $(".gNavSub").css("display","none"); 36 $(".popup > .trigger").on("click", function() { 37 $(this).next().slideToggle('slow'); 38 return false; 39 }); 40 }); 41 42 43 //765px以上の場合 44 } else { 45 //以下、PCレイアウトの際のポップアップでサブナビゲーションを表示・非表示の切り替えとなります。 46 $('nav').css('display', 'block'); 47 $(function(){ 48 $(".popup").mouseenter(function(){ 49 $(this).siblings().find(".gNavSub").hide(); 50 $(this).children().fadeIn(0); 51 }); 52 53 $('.popup').mouseleave(function() { 54 $('.gNavSub').fadeOut(0); 55 }); 56 }); 57 } 58}
PCにて、PCレイアウトからウィンドウ幅を変更した際に再読み込みしますと、
スマホレイアウトのナビゲーション動作は問題ありませんが、再読み込みせずにナビゲーションが正常に動作できればと思います。
PCレイアウト時のマウスオーバーの記述がスマホレイアウトの際にも有効となり、スマホレイアウトのナビゲーションがマウスオーバーでも動作しているのかと思い、スマホレイアウトの際に「mouseenter」「mouseleave」の適用を解除できればスマホのナビゲーションも正常に動作すると考えたのですが、そもそも、その考え方で合っていますでしょうか？
その場合は、調べてみたところ「preventDefault()」「stopPropagation()」「return false;」辺りを利用し、
適用を解除する様な形になるのかと思うのですが、どこにどう記述したら良いものか分かりません…。
（この考え方も合っていますでしょうか？）
そもそも、スマホレイアウトの際に「mouseenter」「mouseleave」の適用を解除するという考え方が合っているのか、
私の初心者知識ですと、それ以外に思いつかない状態です。
何か参考になるアドバイスをいただけると幸いでございます。
よろしくお願い致します。
回答1件
0
ベストアンサー
offメソッドでイベントを取り除くと良いと思います。また、質問者さんの想像する動作は以下のように実現することが出来ると思いますが、いかがでしょうか？
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6</head> 7<body> 8<div id="gnav"> 9 <nav> 10 <ul> 11 <li class="popup"> 12 <a href="" class="trigger"> 13 <span>ナビゲーション_a</span> 14 </a> 15 <div class="drop gNavSub"> 16 <div id="gns1" class="gnSubInner"> 17 <div class="gnsBox clf"> 18 <p class="gnTop"> 19 <a href=""> 20 aのサブナビゲーション 21 </a> 22 </p> 23 <ul class="gnsList"> 24 <li class="gnNews1"> 25 <a href=""> 26 aのサブナビゲーション 27 </a> 28 </li> 29 <li class="gnNews2"> 30 <a href=""> 31 aのサブナビゲーション 32 </a> 33 </li> 34 <li class="gnNews3"> 35 <a href=""> 36 aのサブナビゲーション 37 </a> 38 </li> 39 </ul> 40 </div> 41 </div> 42 </div> 43 </li> 44 <li class="popup"> 45 <a href="" class="trigger"> 46 <span>ナビゲーション_b</span> 47 </a> 48 <div class="drop gNavSub"> 49 <div id="gns2" class="gnSubInner"><!-- id属性の値が重複していたため修正 --> 50 <div class="gnsBox clf"> 51 <p class="gnTop"> 52 <a href=""> 53 bのサブナビゲーション 54 </a> 55 </p> 56 <ul class="gnsList"> 57 <li> 58 <a href=""> 59 bのサブナビゲーション 60 </a> 61 </li> 62 <li> 63 <a href=""> 64 bのサブナビゲーション 65 </a> 66 </li> 67 <li> 68 <a href=""> 69 bのサブナビゲーション 70 </a> 71 </li> 72 <li> 73 <a href=""> 74 bのサブナビゲーション 75 </a> 76 </li> 77 </ul> 78 </div> 79 </div> 80 </div> 81 </li> 82 <li> 83 <a href=""> 84 ナビゲーション_c 85 </a> 86 </li> 87 </ul> 88 <p> 89 <a href=""> 90 ナビゲーション_d 91 </a> 92 </p> 93 </nav> 94</div> 95<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 96<script> 97 $(window).on('load resize', setSize); 98 99 function setSize() { 100 var w = $(window).width(); 101 var x = 765; 102 103 $("body").find("*").off(); 104 if (w <= x) { 105 $(".gnsList, .gNavSub").css("display", "none"); 106 107 $("#spNav").on("click", function () { 108 $("#spNav").css("display", "none"); 109 $("#spClose").css("display", "block"); 110 $("nav").fadeIn(200); 111 }); 112 113 $("#spClose").on("click", function () { 114 $("#spNav").css("display", "block"); 115 $("#spClose").css("display", "none"); 116 $("nav").fadeOut(200); 117 }); 118 119 $(".popup > .trigger").on("click", function () { 120 $(this).next().slideToggle("slow"); 121 return false; 122 }); 123 } else { 124 $(".gnsList").css("display", "block"); 125 126 $(".popup").on("mouseenter", function () { 127 $(this).siblings().find(".gNavSub").hide(); 128 $(this).children().fadeIn(0); 129 }).on("mouseleave", function () { 130 $(".gNavSub").fadeOut(0); 131 }); 132 } 133 } 134</script> 135</body> 136</html>
投稿2017/08/16 16:45
編集2017/08/16 16:45
総合スコア14731
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/17 04:40
2017/08/18 19:22
2017/08/24 03:19