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

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

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

Link

【jquery】シンプルで理想的なメガメニューのサンプル - Qwerty.work

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

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

window.location.hrefで解決

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

Link

jQueryでリンク先への遷移直前にいろんな機能をつけてみる | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-Designsupply.llc-

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');
  });
});