【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」)くらいでも大丈夫でした。