WordPress「ストーク」のメニューの同ページ内リンクのカスタマイズに関して

Question

HTML、CSS、PHP（ほんの少し）を独学で勉強ぽこみちと申します。

WordPressのテーマ「ストーク」を子テーマにしてカスタマイズ利用しています。
スマホページにて表示されるナビゲーションボタン内のメニューに同ページリンクを設置した際に、ポップアップで表示されるメニューが非表示にならずに困っております。
Webで調べて以下のソースをheader箇所に挿入したのですが、どうもうまくいきませんでした。

該当のソース

<div class="remodal remodal-is-initialized remodal-is-opened" data-remodal-id="spnavi" data-remodal-options="hashTracking:false" tabindex="-1">
<button data-remodal-action="close" class="remodal-close"><span class="text gf">CLOSE</span></button>
<ul id="menu-test-1" class="sp_g_nav nav top-nav cf"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-426"><a href="http://yzan.jp/#blog">Yzanブログ<span class="gf"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-651"><a href="http://yzan.jp/#philosophy">Yzanの理念<span class="gf"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-652"><a href="http://yzan.jp/#business">ビジネス<span class="gf"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-653"><a href="http://yzan.jp/#people">Yzanと人<span class="gf"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-654"><a href="http://yzan.jp/#contact">お問い合わせ<span class="gf"></span></a></li>
<span class="text gf">CLOSE</span></button>
</div>

試したこと

<script> $(function() { $('#menu-test-1 a').click{ $('this').parents('div').css('display','none'); } }); </script>

の挿入

情報不足だとは思いますが、必要な項目がありましたら追記いたしますのでそちらも含めて教えていただけますと助かります。
よろしくお願いいたします。

Comments

[yoorwm]

ソース見たままだと、#menu-test-1 aと指定しているのにa要素が無いのですが、メニュー項目が省略されているだけでしょうか？

[pokomichi]

yoorwmさんご返信いただきましてありがとうございます。メニュー項目省略しております。<li id="menu-item-426" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-426"><a href="http://yzan.jp/#blog">Yzanブログ<span class="gf"></span></a></li>がメニュー内容の一部になります。

[yoorwm]

そこらへんは質問文を更新した方が良いのですが、この場合はparentsじゃなくてclosest使えばいいのではないでしょうか？

[pokomichi]

ご指摘ごもっともです。ありがとうございます！修正いたしました。parents⇒closestに修正しましたができませんでした。

Answer 1

ちょっと書き方が違いますね

// こうじゃなくて
$('#menu-test-1 a').click{

// こう
$('#menu-test-1 a').click(function(){

クローズボタンをクリックさせる方がスマートでいいかなーと思います。

$(function() {
  $('#menu-test-1 a').click(function(){
    $('.remodal-close').click();
  });
});

Comments

[pokomichi]

aozukiさん
返答いただきありがとうございます！
いただいたソースに書き換えたのですが、まだ状況がかわりません。
なにか別の箇所見たほうが良い部分ありますでしょうか？
親テーマをいろいろと見ているのですが、どのScriptでこのメニュー部分を制御しているのかもわからないレベルなもので、申し訳ないです。

[退会済みユーザー]

ブラウザの開発者ツールで
・JavaScriptでエラーが出てないか
・イベントが発火しているか（console.logで確認）
この辺確認してみた方が良いかもしれないです。

デモページでですが確認したところ正常に動くので処理自体に問題はなく、そもそも読み込まれてなかったり、他の箇所でエラーが出てたりするんじゃないでしょうか。

[pokomichi]

返信遅くなってすいません！
Chromeの開発者ツールで確認したところ、
ReferenceError: $ is not defined
のエラーが表示されていました。
＜入力ソース＞
<script>
$(function() {
$('#menu-test-1 a').click(function(){
$('.remodal-close').click();
});
});
</script>

の$(function() {
この部分にエラーが出ていました。
JavaScript、jQueryに関しての知識が乏しくて解決ができませんでした。

[退会済みユーザー]

1行目を下記のように書き換えてみてください。

jQuery(function($) {

これでもエラーが出る場合はそもそもjQueryが読み込まれていないので読み込ませてください。

[pokomichi]

ありがとうございます！
ソースの中にはjQuery入っていたので大丈夫かとは思ったのですが、上部に追記してできるようになりました。
テーマに既存でついているSearchboxもこの動きを邪魔しているみたいなので、テーマを販売している会社に削除方法を確認しみようと思います！
大変助かりました。
ありがとうございます！！