【jQuery】メガメニュー内の子要素のリンクでページにジャンプ（移動）できないとき

Wed, 13 Jul 2022 17:27:21 +0900

メニュー内のリンクをクリックしても反応しない

先日、jQueryを使用して↓メガメニューを作成しました。

https://qwerty.work/blog/2022/07/jquery-megamenu.php https://qwerty.work/blog/2022/07/jquery-megamenu.php

しかし、メニューを開閉はいいのですが、メニューにあるリンクをクリックしてもアンカーリンクで設定したURLのページに遷移しませんでした。どうもクリックの動作をjQueryで捕まえていて邪魔しているような感じがします。

window.location.hrefで解決

以下のページに解決方法がありました。

https://designsupply-web.com/media/programming/2995/ https://designsupply-web.com/media/programming/2995/

原因

原因はevent.preventDefault();でした。メガメニュー開閉の二重クリックを防ぐために使っていたこのコードがリンクを無効にしていたようです。

例えば以下のようなコード。

$("a").on('click',function(event){
     event.preventDefault();
  });

このような場合、window.location.href = $(this).attr('href');を加えて、JSからジャンプするようにしたら解決できました。

解決したソース例

メガメニュー（.menu_contents）内にあるアンカーリンク（a）をクリックまたはタップしたら、メガメニューを閉じて、リンク先へジャンプするといった内容です。

$(function () {
  var clickEventType = ((window.ontouchstart !== null) ? 'click' : 'touchstart');
  $('.menu_contents a').on(clickEventType, function () {
    $('.menu_contents').hide();
    window.location.href = $(this).attr('href');
  });
});

【jQuery】シンプルで理想的なメガメニューのサンプル

Wed, 06 Jul 2022 09:27:53 +0900

jQueryで実現するメガメニューはたくさんありますが、挙動が合わない、コードが複雑、実装の難易度が高いということがあります。そこで、簡単でいいものを見つけましたのでメモ。

少ないコードでできるサンプルコード

参考サイト

以下のページにあるサンプルコードを試したところ、あっさり実現できました。

https://www.flatflag.nir87.com/megamenu-2106 https://www.flatflag.nir87.com/megamenu-2106

試しに作ってみたテストページ

https://qwerty.work/test/test-megamenu.php

マウスオーバーとタッチ（クリック）の両対応したいとき

パソコン用のサイトはマウスホバーで開いてくれるのはいいのですが、スマホやタブレットなど、タッチパネルの場合はタッチまたはクリックで開くようにしなければなりません。私は以下の方法で両対応しました。

JSのソース例

メニューが開いている状態と閉じている状態をflagで判別してjQueryによる開閉動作を行うようにしています。

$(function() {
  var flag = 'close';
  //PCの場合はマウスオーバーで開閉
  $('#menu li').hover(function() {
    $(this).find('.menu_contents').stop().slideDown();
    flag = 'open'; 
  }, function() {
    $(this).find('.menu_contents').stop().slideUp();
    flag = 'close';
  });
  //タブレットの場合はタップで開く
  var clickEventType=((window.ontouchstart!==null)?'click':'touchstart');
  $('#menu li').on(clickEventType,function() {
   if (flag =='close') {
    flag = 'open'; 
    $(this).find('.menu_contents').stop().slideDown();
    event.preventDefault();
   } else {
    flag = 'close';
    $(this).find('.menu_contents').stop().slideUp();
    event.preventDefault(); 
   }
  });
});

クリックで開閉する部分については、以下の書き方でも動きました。

$('.menu_contents').hide();
 $('.menu_list a').click(function(e){
     e.preventDefault();
     // hide all span
     var $this = $(this).parent().find('.menu_contents');
     $('.menu_list .menu_contents').not($this).hide();
     // here is what I want to do
     $this.toggle();
 });

補足

clickとtouchstartイベントが二重に実行されないようにする

clickまたはtouchstartどちらかのイベントで動作させたいとき、以下のように指定することがあります。

$('#menu li').on('click touchstart',function(){

場合によっては1クリックしかしていないに、clickとtouchstartが同時に実行され、メニューが一瞬だけ表示され、正常に表示できない場合があります。これを以下のコードでデバイスによってどちらか方法に固定します。

var clickEventType=((window.ontouchstart!==null)?'click':'touchstart');
  $('#menu li').on(clickEventType,function() {

この方法は以下のページを参考にしました。

https://sakura.monte-verita.biz/3409 https://sakura.monte-verita.biz/3409

event.preventDefault();で一時停止させる

ワンクリックや1回のタッチしかしていないのに、どうしてもイベントが多重発生してしまう場合に、以下のコードで一時停止させることができました。

event.preventDefault();

または

eevent.stopPropagation();

この方法は以下のページを参考にしました。

https://spyweb.media/2017/12/25/js-touch-click-event-twice-at-the-same-time/ https://spyweb.media/2017/12/25/js-touch-click-event-twice-at-the-same-time/

https://blog.fenrir-inc.com/jp/2011/06/ios_android_pc_touchevent.html https://blog.fenrir-inc.com/jp/2011/06/ios_android_pc_touchevent.html

その他のメガメニュー

多段で表示できるもの。

https://github.com/kamens/jQuery-menu-aim https://github.com/kamens/jQuery-menu-aim

https://qiita.com/nnipsii/items/c707dd721f502b0a732b https://qiita.com/nnipsii/items/c707dd721f502b0a732b

http://jsfiddle.net/BGSyS/3/ http://jsfiddle.net/BGSyS/3/

https://coder-memo.com/drop_menu/ https://coder-memo.com/drop_menu/

メガメニュー on qwerty.work