質問質問質問質問質問

Question

質問質問質問質問質問質問質問質問質問質問質問質問質問質問質問

Comments

[kei344]

script.js はどこに記載されているのでしょうか。

[退会済みユーザー]

index.htmlのhead内で外部ファイルとして読み込んでおります。

[kei344]

提示の内容では「spMenu()」はどこからも実行されませんので、どの環境でも動かないと思います。

[退会済みユーザー]

失礼しました。script.jsの中に書かれております。質問内容も更新いたしました。

Answer 1

イベントが正しくアタッチされていないのが原因だと思われます。ヘッダーをロードしたあとのコールバックでイベントを登録したりdocumentに対してイベントを登録するなどしてみてはいかがでしょうか。

$(function() {
  $("#header01").load("header.html", function() {
    $('#spMenu').on('click', function(e) {
        $('.gnav').slideToggle(e);
    });
  });
})

or

$(function() {
  $(document).on('click', '#spMenu', function(e) {
    $('.gnav').slideToggle(e);
  });
})

Comments

[退会済みユーザー]

ご回答ありがとうございます。ご教示いただいた内容で試してみます。

[退会済みユーザー]

お陰様でクリック後、開閉することはできましたが、ヘッダー要素（高さ）がないものと見なされて上に詰まってナビが表示されてしまいます。。当初の質問ではJSの一部を掲載していましたが、それでは原因が追いづらいかと思いますので、全部掲載しております。

[nt4c]

当初の質問内容とは別の内容になってしまっていますので詳しい回答を控えますが、ヘッダーを読み込み終わった後に処理をすればよいかと思います。後学のためにも処理をするタイミングをよく考えるようにしてみてください。

[退会済みユーザー]

ご返信ありがとうございます。

関数の読み出しを
ヘッダー読み込み　includeHead();
↓
余白調整　headerPadding();
の順に変更しましたが、
やはり実機から確認すると、ナビが上に詰まり表示されますね。。

[退会済みユーザー]

おっしゃる通り、当初の質問内容と変わってきているので、いったんクローズさせていただきます。