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

Sat, 06 Aug 2022 23:19:46 +0900

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

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

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

https://dezanari.com/jquery-disable-click-certain-time/ 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」）くらいでも大丈夫でした。

Pointer-Events on qwerty.work

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

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

解決できたソース例