jQueryの質問になります。
JSの経験がほぼないため、具体的な修正方法を教えていただければと思います。
ウィンドウサイズが860以上の場合は横並びメニューを表示(親メニューのホバーで子メニューが表示)し、860以下になった場合はハンバーガーメニューに切り替わることを想定し、以下のような記述をしました。
jQuery
1$(window).on("load resize", 2 function() { 3 var w = $(window).width(); 4 var x = 860; 5 if (w > x) { 6 $(".navi_parents").hover(function() { 7 $(this).children(".navi_child").slideDown(); 8 }, function() { 9 $(this).children(".navi_child").slideUp(); 10 }); 11 } 12 if (w <= x) { 13 $("#global_navi").hide() 14 $(".nav_toggle").show(); 15 $(".navi_parents").children("a").removeAttr("href"); 16 $(".nav_toggle").click(function() { 17 $(this).toggleClass("open"); 18 $("#global_navi").toggleClass("open"); 19 }); 20 $(".navi_parents").click(function() { 21 $(this).find(".navi_child").toggleClass("open"); 22 }); 23 } 24}); 25
上記を実行したところ、下記のような現象が起きています。
(その1)
ウィンドウサイズが860以上のところから860以下に狭めると、ハンバーガーメニューが表示され、想定通りの挙動となるが、860以下から860以上に変更してもハンバーガーメニューのままになっている。
(その2)
ハンバーガーメニュー表示時、メニューからリンク先へ飛んだときにメニューをクリックすると開閉されるが、画面をスクロールした途中でメニューをクリックするとメニューの開閉がされない。
自分でも色々試してみたのですが、原因がわからず行き詰まっております。
よろしくお願いします。。
【追記】
説明不足で申し訳ございません。
メニュー部分ですが、以下のようになっています。
HTML
1<div class="navi"> 2 <div class="nav_toggle"> <!-- ハンバーガーメニュー表示用 --> 3 </div> 4 <nav id="global_navi"> <!-- ナビゲーション部分 --> 5 <ul> 6 <li class="navi_parents"><a>メニュー1</a> <!-- 親メニュー --> 7 <ul class="navi_child"> <!-- 子メニュー(親メニュークリックで開閉) --> 8 <li><a>子メニュー1</a></li> 9 <li><a>子メニュー2</a></li> 10 </ul> 11 </li> 12 <li><a>メニュー2</a></li> 13 <li><a>メニュー3</a></li> 14 </ul> 15 </nav> 16</div>
860以下で#global_naviが非表示となり.nav_toggleが表示されます。
.nav_toggleをクリック(タップ)することで#global_naviが開閉でき、さらに親メニューをクリック(タップ)することで子メニューが開閉できるようになる想定です。
回答3件
あなたの回答
tips
プレビュー