【SWELL】ページ内リンクをタップした際に、スマホ用開閉メニューが閉じない時の対応

WordPressテーマ「SWELL」のスマホ用の開閉メニューは、リンクをタップ（クリック）すると、自動的にメニューが閉じる仕様になっている。しかし、メニューにページ内リンクが設定されていると、タップしてもメニューが閉じない場合がある。jQueryで簡単に修正できるので参考になれば幸いだ。

グローバルナビやSPメニューにページ内リンクを設定する

例えばLP型のサイトで、グローバルナビゲーションメニューのほとんどはトップページ内のコンテンツへのリンク（ページ内リンク）だが、一部プライバシーポリシーや問い合わせフォーム等を別ページにしているケースが該当する。

カスタムリンク：#contents1

カスタムリンクで「#コンテンツID（HTMLアンカー）」を入力すると、メニューにページ内リンクを設定することができる。

この場合、トップページを閲覧中にクリックする分には問題ないが、その他のページでクリックすると機能しない。

他のページからトップページ内のコンテンツへリンクするには、カスタムリンクの頭に「/（スラッシュ）」をつけてルート相対パスを利用するか、http〜の絶対パスを指定する等してトップページを明示する必要がある。

カスタムリンク：/#contents1

こうすることで、他のページからトップページ内のコンテンツ（ページ内リンク）が機能するようになる。一方で、SWELLのスマホ用開閉メニューで当該リンクをクリックしても閉じなくなる。

SWELLのSPメニューの開閉をコントロールする

SWELLのスマホ用開閉メニューは、html要素のdata-spmenu属性で開閉をコントロールしている。data-spmenuがopenedで開いてclosedで閉じる。つまり、リンクをクリックした際に、data-spmenuをclosedにすることでメニューを閉じることができる。

jQueryでリンクのクリック時にdata-spmenuをclosedにする

jQuery(function($){
  $('#sp_menu a[href*="#"]').on('click', function() {  
    $('html').attr('data-spmenu','closed');
  });
});

カスタムCSS&JSの「JS用コード」に記載する。
なおjQueryを使用する場合は、SWELL設定でjQueryの読み込みを有効化（チェック）しておくこと。

data()メソッドではDOMの要素は変更されないので注意

jQuery(function($){
  $('#sp_menu a[href*="#"]').on('click', function() {  
    $('html').data('spmenu','closed');
    console.log($('html').data('spmenu'));
  });
});

data属性の変更なのでdata()メソッドでもいけそうな気がするが、data()はjQuery上のキャッシュを書き換えるのみでHTMLは変更されない。上記のコードの場合、console上はdata-spmenuがclosedになるが、HTMLはopenedのままになる。DOMの要素を書き換える必要がある場合は、attr()メソッドを使う。