グローバルナビ内の親要素（または特定の）リンクを無効にして親と子を個別に開閉させる方法
グローバルナビ関連でもう一個。
グローバルナビには親要素と子要素の概念がありますよね？
モバイル端末で見た際に最初は親要素のみ表示してドロップダウンメニューのように必要な子要素のみを表示させる、というカスタマイズがあります。
ですが実際にこれを使おうとすると、親をタップした瞬間親要素のクリックイベントが発生し子要素を開くことが出来なくなってしまいます。
こっちのブログだとそうでも無いんですがパチンコブログの方はグローバルナビ内にやたら詰め込んでいるので是が非でもやりたかったのですｗ
めちゃくちゃ苦戦しましたが…
https://ksukelife.com/blog/1181/上の記事の方法でアイコン表示させている場合だとめちゃくちゃ簡単に無効化出来たのでその方法を。
特定のリンクを無効化させる方法
理想としてはこの状況を作りたいわけです。
モバイル端末向けに親子別々に開閉させるために、色々手法がありますが、ブラウザ依存するだとかURLが表示されなくなる、とかある程度の満足感しか得られません。
上記画像の状態は、Luxeritas開発者るな様のサイトで出来ることに気付いたので、色々頑張ってみました。
まずアイコン付けてない場合
前の記事の方法でアイコン付けていない場合、個別での指定が出来なくなります。
なので見出しっぽいカスタムリンクをメニューから入れるしかありませんでした。
メニュー項目からカスタムリンクをURL何も入れてない状態で入れようとするとエラーが出ます。（空白にした場合も同じ）
ただ…
なんでも良いので一文字入れると入ります。メニューに入れたあとは、ちゃんと「http://～」の部分は消しときましょう。（エラー出るリンクが有効になる）
これを親要素の見出しとして使います。
モバイルユーザーの方が多いサイトだとこっちでもバレませんｗ
ただ万が一、PCで見られてしまうと違和感がすごいところが一つだけありまして。
わかりにくいですが、通常リンクはポインター（指マーク）になりますが一部だけ「I」になります。
これを対処する方法が以下。
#gnavi li a{
cursor: pointer;
}グローバルナビ上でのカーソルを改めて指定すれば対処できます。反映させるクラスを少し変更しました。
実際にパチンコブログの方がこっちのやり方です。
この見出し分の横をタップすると、
メニューはちゃんと開きますし、リンク先に飛ぶこともありません。（というかそもそも＜ａ＞タグじゃないｗ）
アイコンを付けてる場合
前回記事同様メニューIDを調べてアイコンを付けている場合jQueryが使えます。前回記事のコメント頂いたことにより仕様を変えました。あさん、激しくありがとうございます！
本来ならこれが一番やりやすく、見た目上＜a＞タグとして機能しますのでスマートです。
＜a＞にクラスを付与できれば良かったんですが、本体ファイルを触る必要がありそうで困ってたんですが…。
直下のみにjQueryを反映させられるようなので個別に指定できるっぽいのでその方法を語ります。
下準備
普段jQueryなんか使わん、という人は有効化出来てない可能性があります。
（Luxeritas＞カスタマイズ＞圧縮・最適化項目）
「必要無い」となってる場合はそれ以外に変えてください。基本「圧縮する」で大丈夫です。
（同じくJavascript項目）
上画像はjQueryをどのように読み込むかの項目です。内蔵のものが最安定で高速です。（一応内蔵のものでも有効になる書き方します。）
下画像はチェック入れてた場合読み込まれません。これに気付かず他の環境では出来たのにここではjQueryが効かなかったｗ
とりあえずjQueryが使える環境になりました。
jQueryコード
これを子テーマ内のJavascriptタグ部に記述してください。（luxech.jsファイル）
jQuery(function ($) {
$('#menu-item-//ID > a').click(function(){
return false;
})
});これは一個だけ無効化させたい場合。
複数指定したい場合は以下。
jQuery(function ($) {
$('#menu-item-1177 > a, #menu-item-819 > a, #menu-item-822 > a').click(function(){
return false;
})
});例として実際僕が指定してるIDを載っけました。
カテゴリーとブログ関連・仕事関連のとこを無効化してます。一個指定したら「,」で半角スペース入れて次の…って感じです。
上のコードだと「//ID」としているもの、下のコードだと各数字を無効化させたい項目のものと置き換えればうまくいくはず。
とりあえずご自身の環境で記述が終わったあと、実際にクリック・タップしてリンク先に飛ばないかどうかテストしてみてください。
うまくいく時とうまくいかない時の違いがわかりませんがｗ非同期にしてるからでしょうか…？
まぁこればっかりはしゃあないですね。読み込んですぐは無理っぽいですｗたぶん。
うまくいかなかったら…
どうやら色々試してみるとキャッシュも影響してるっぽい。
閲覧履歴とキャッシュを削除してテストしてみたら安定して表示されるようにはなりました。
もしそれでもダメならライブラリをCDNに変えたり。jQueryを同期にしてみたりお試しください…が。
僕は現在WP内蔵のもの＋非同期でも安定して無効化出来るようにはなってます。のでキャッシュうんぬんを疑ったほうが良いですね。
キャッシュ系プラグイン入れてる場合は要注意です。
孫もあって子要素を無効化にしたいという場合、
- 親テーマをホバー
- 子が開く（←この度jQueryを読み込んでる）
という感じなので、「無効化出来てる～っ」てポチポチしてたら普通に何回目かにリンクされたことがありました。
子が開いた状態で一定時間待ってると無効になってくれる感じです。なので親要素相手には強い！（常に出てるから）