[Wordpress] ハンバーガーメニューのページ内リンクをクリックしてもメニューが閉じない

現在WordpressでLPを作成しています。
使用しているテーマは　adagio lite　というテーマです。

ハンバーガーメニューが実装されていて、その中にページ内リンクを付けました。
メニューをクリックすると該当箇所に飛べるのですが、メニュー表示が消えなくて困っています。（メニューを閉じるボタンも固定されていて、閉じるためには結局ページのトップまで移動しないといけません。）

どうすればいいのでしょうか？

ちなみに、私はプログラミングを始めたばかりで学んだものもHTML,CSSのみなのでPHPやJavascript,jQueryは全く分かりません。
何を載せればいいのかも全く検討がつかないので、必要なコードがありましたら返信にてお知らせください。

※追記
「必要なコードを載せて欲しい」と返信をいただいたので、該当しそうなコードを載せます。

PHP
1<?php
2/**
3 * The Header for our theme.
4 *
5 *
6 * @package Adagio Lite
7 */
8?>
9<!DOCTYPE html>
10<html class="no-js" <?php language_attributes(); ?>>
11<head>
12<meta charset="<?php bloginfo( 'charset' ); ?>">
13<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=2.0, user-scalable=yes" />
14<link rel="profile" href="http://gmpg.org/xfn/11">
15<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
16<?php wp_head(); ?>
17</head>
18
19<body <?php body_class(); ?>>
20<div id="container">
21<?php if ( is_front_page ()) : ?>
22<div class="slogan">
23  <h2 class="site-description"> <span>
24    <?php bloginfo( 'description' ); ?>
25    </span> </h2>
26</div>
27<div id="line-arrow"></div>
28<?php if ( has_nav_menu( 'social' ) ) {
29					wp_nav_menu(
30						array(
31							'theme_location'  => 'social',
32							'container'       => 'div',
33							'container_id'    => 'menu-social',
34							'container_class' => 'top-social-menu',
35							'menu_id'         => 'menu-social-items',
36							'menu_class'      => 'menu-items',
37							'depth'           => 1,
38							'link_before'     => '<span class="screen-reader-text">',
39							'link_after'      => '</span>',
40							'fallback_cb'     => '',
41						)
42					);
43	} ?>
44<?php endif ?>
45<div id="header">
46  <div id="headerin">
47    <div id="headerline">
48      <div id="logo">
49        <?php the_custom_logo(); ?>
50        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
51        <h1 class="site-title">
52          <?php bloginfo( 'name' ); ?>
53        </h1>
54        </a> </div>
55      <?php if ( has_nav_menu( 'main-menu' ) || has_nav_menu( 'secondary-menu' ) || is_active_sidebar( 'sidebar-1' ) ) : ?>
56      <div class="menu-button"> <a class="btn-open" href="#a">
57        <div class="bar1"></div>
58        <div class="bar2"></div>
59        <div class="bar3"></div>
60        </a> </div>
61      <div class="overlay">
62        <div class="inner-overlay">
63          <?php if ( has_nav_menu( 'main-menu' ) ) {
64    				wp_nav_menu( 
65						array( 
66							'theme_location' => 'main-menu', 
67							'container_class'   => 'mainmenu',
68							'menu_class' 	 => '',
69							'fallback_cb'	 => false
70						)
71					);
72  					} ?>
73          <?php if ( has_nav_menu( 'secondary-menu' ) ) {
74    				wp_nav_menu( 
75						array( 
76							'theme_location' => 'secondary-menu', 
77							'container_class'   => 'secondary-menu',
78							'menu_class' 	 => '',
79							'fallback_cb'	 => false
80						)
81					);
82  					} ?>
83          <?php get_sidebar(); ?>
84        </div>
85      </div>
86      <?php endif ?>
87    </div>
88  </div>
89</div>
90<div id="wrapper">
91<?php if (is_front_page() && ( has_header_image() || is_active_sidebar( 'sidebar-2' ) )) {
92  			get_template_part( 'topsection' );
93		} ?>
94

ヘッダーの部分で困っているので、該当していると思った”header.php”を載せました。

Lhankor_Mhy

2021/01/12 06:20

ひとまず、JavaScriptのコードをご提示ください。

gg_

2021/01/12 12:06

ご返信ありがとうございます。テーマエディターの中に”menu.js”という名前のコードがあったので、こちらの載せます。（先程の投稿に”header.php”という名前のコードも載せました。） jQuery(document).ready(function(){ jQuery(".menu-button").click(function(){ jQuery(".overlay").fadeToggle(400); jQuery(this).toggleClass('btn-open').toggleClass('change'); }); }); jQuery(window).scroll( function() { if ( jQuery(window).scrollTop() > 500 ) { jQuery('#header').addClass('fixed animated fadeInDown'); } else { jQuery('#header').removeClass('fixed animated fadeInDown'); } if ( jQuery(window).scrollTop() > 500 ) { jQuery('#wrapper').addClass('fixed'); } else { jQuery('#wrapper').removeClass('fixed'); } });

行動規範の内容に同意します

回答1件

ベストアンサー

試していませんが、こんな感じだと思います。

js
1jQuery(document).ready(function () {
2    jQuery(".menu-button").click(function () {
3        jQuery(".overlay").fadeToggle(400);
4        jQuery(this).toggleClass('btn-open').toggleClass('change');
5    });
6// ここから追加
7    jQuery(".overlay a").click(function () {
8        jQuery(".overlay").fadeToggle(400);
9        jQuery(this).toggleClass('btn-open').toggleClass('change');
10    });
11// ここまで
12});

投稿2021/01/13 03:30

Lhankor_Mhy

総合スコア36074

gg_

2021/01/16 02:17 編集

コードの提示ありがとうございました。コードを追加した後、ChromeとSafariの２つのブラウザで動作を確認しました。各ブラウザでの結果は以下の通りです。 <Chrome> ・メニューのテキストをクリックすると移動はするが、メニューが消えなかった。 <Safari> ・メニューのテキストをクリックすると移動して、メニュー表示もなくなっているように見えるが、今度はハンバーガーメニューのボタンの役割が真逆になってしまった。（メニュー展開中は３本線になり、メニュー縮小時は✖️印になっている。）

Lhankor_Mhy

2021/01/13 14:31

> 今度はハンバーガーメニューのボタンの役割が真逆になってしまった。では、toggleではなくて、removeClass や fadeOut にしてみるといいかもしれませんね。

gg_

2021/01/16 02:15

ご返信ありがとうございました。コメントにありました変更を両方とも試してみましたが、変化はありませんでした。

Lhankor_Mhy

2021/01/16 02:19

全体のコードが見えないので何とも言えませんが、なんらかのエラーが出ているのかもしれませんね。出力されているHTMLをご提示いただければ、もう少し何かわかることがあるかもしれません。

gg_

2021/01/16 02:26 編集

:http://gamuvie.wp.xdomain.jp/ こちらが自分が作成しているページです。 web関係の仕事に必要なポートフォリオを作っています。

Lhankor_Mhy

2021/01/16 03:06

ありがとうございます。追加するコードですが、 jQuery(this).toggleClass('btn-open').toggleClass('change'); ではなくて、 jQuery(".menu-button").toggleClass('btn-open').toggleClass('change'); でした。

gg_

2021/01/16 08:42

コードを変更したら問題解決できました！ jQueryの書き方を勉強して自力でコードを書いてみることもしてみましたが上手くいかずため息ばかりでした。お陰様でポートフォリオとして提示できる内容になりました。ありがとうございました。

行動規範の内容に同意します