YAM!

jQuery

ハンバーガーメニューをページ内リンクでも閉じる

皆さんこんにちは!
ページ内リンクでハンバーガーメニューが開きっぱなしで困ったことありませんか?今回はその対策方法ご紹介します。
メニューのデザインや仕組みによって解決策が異なります。伏字の前にある「.」や「#」は必要に応じて変更してください。

方法1

〇〇内のリンクをクリックしたら、△△をクリックした事にします。
ドロップダウンのメニュー部分が「display:block」などで表示されている場合に有効です。

 $('#〇〇 a[href]').on('click', function(event) {
 $('.△△').trigger('click');
 });
 

方法2

〇〇内のリンクをクリックしたら、△△のチェックボックスをチェックなしの状態にします。
ドロップダウンの仕組みがチェックボックスでできている場合に有効です。

 $(function() {
 $('.〇〇 a').on('click', function(event) {
 $('#△△').prop('checked', false);
 });
 });
 

方法3

〇〇内のリンクをクリックしたら、◇◇をスライドし、△△からクラス名「□□」を削除します。
jQueryでのメニューで多いスライドで出現させる処理を行ってるメニューに有効です。
また、これと似たものでクリックしたらクラスを与えるものもあります。

 $(".〇〇 a").on("click", function() {
 $(".◇◇ ul").slideToggle();
 $(".△△").removeClass("□□");
 });
 

バナー広告の参考にも! 寄り道で一息。

もっと広告を見てみる!
TOP