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

目次

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

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

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

解決できたソース例

上記にあったサンプルでは、スライダーでの利用を想定していますが、私の場合、メガメニューの裏側にあるスライダー(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」)くらいでも大丈夫でした。

前へ

【CSS】両端だけ半円(丸)にする border-radius: 9999px;

次へ

【jQuery】hoverとtouchの共存について模索したこと