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

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

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

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

window.location.hrefで解決

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

原因

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

Underground News