【jQuery】メニューを閉じる時にメニュー裏に重なったリンクが開くを防ぐ

メガメニューを閉じるときのタップで裏側のリンクが開いてしまう

アコーディオンやメガメニューに設定したリンクや閉じるボタンが、コンテンツのリンクと重なっていて、スマホやタブレットでメニューを閉じるときにiPhoneやiPadのSafari上でタップすると、メニューを閉じた後に下のリンクが開いてしまいました。これをどうにか解消するために、良い方法がないかな?と探してみました。

setTimeoutを使って一定時間、マウスポインターを無効にすることで解決できる方法があったのでメモ。

Link

jQueryで一定時間だけクリックを無効にする方法 | でざなり

https://dezanari.com/jquery-disable-click-certain-time/

解決できたソース例

上記にあったサンプルでは、スライダーでの利用を想定していますが、私の場合、メガメニューの裏側にあるスライダー(slick-silder)のリンクがボタン裏にあり、それが開いてしまうことを想定しています。「閉じる」ボタンが押されたら、CSSのpointer-events:none;を対象の要素に追加して、スライダーのリンク(aタグ)をクリックできないよう、マウスポインターを2秒間無効にして元に戻すという内容です。

$(function() {
  $('.button').click(function() {
    $('slick-slide a').css('pointer-events', 'none');
    setTimeout(function () {
      ('slick-slide a').css('pointer-events', '');
    }, 2000);
  });
});

これでうまくいきました。待機時間は0.25~0.5秒(250~500」)くらいでも大丈夫でした。

PAGETOP