ハンバーガーメニューが急に動かなくなった！初心者向け解決法

ハンバーガーメニューが急に動かなくなった！初心者向け解決法

2018/6/18    ume

---

正常に機能していたハンバーガーメニューが、いつのまにか動かなくなっていた人向けの解決法です。

最初から不具合がある場合には、参考にならないと思いますm(__)m




私のblogのハンバーガーメニューは、もともとテンプレートに付属していた機能です。

sidebarのメニューは、PCやタブレットで閲覧した場合には常に表示されていますが、スマホだとハンバーガーメニューに格納されます。

ハンバーガーメニュー

普段自分でクリックすることはないので、動かなくなっていることに中々気づけませんでした…。

いったいいつから？そして、原因は何なのか？

PCの表示に問題はないことから、メニュー自体ではなく、ハンバーガーメニューの中身を表示するjQueryの不具合であることは明らか。

jQueryは「TOPへもどるボタン」を設置するためにhead内に記述してから、ずっといじってないんだけどなぁ。
↓

HTML

script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'/

そもそもハンバーガーメニューは、jQueryを記述する前から動いていたわけで。

う～ん。

とりあえずこちらのサイトを参考にしてみました。

jQueryが動かない（動作しない）理由を考察！スクリプトのどの箇所にミスがあるかを調べる裏技も紹介 | 誰かのためのホームページ制作

jQueryが動かない時の悲しさ。筆者も幾度となく経験している。 だが今となっては、粘り強く原因を究明し対応できるようになった。 本稿ではjQueryが動かない主な原因について紹介するとともに、どのように対応し動かせばよいのかの解説もつけてみた。実際のところ対応方法はケースバイケースなので、詳細のアドバイスはなかなか難しいが、トラブル解決のヒントに役立てていただければ幸いだ。 ...

こちらで紹介されている「jQueryが動かない原因」は14項目あります。

1.1 jQuery本体を読み込んでいない
1.2 jQuery本体のバージョンが適したものでない
1.3 jQuery本体を複数読み込んでいる
1.4 scriptタグの使い方を学んでいない（よくわかっていない）
1.5 インターネット接続が切れている
1.6 URLパスの間違い=必要ファイルが読み込まれていない
1.7 別途読み込む必要があるスクリプトを読み込んでいない
1.8 HTMLに記述ミスがある
1.9 セレクター記述にミスがある
1.10 jQuery以外のライブラリと競合している
1.11 jQuery同士・jQueryプラグイン同士が競合している
1.12 head内かbody閉じタグ直前か、記述場所が違う
1.13 jQueryのCSSが他のCSSと競合している
1.14 (function($){ … }(jQuery)) で囲んでいない

私のような初心者は、「jQueryを使って動くなにか」をブログに導入する際、基本コピペです。
イチから記述するようなことはできません。

また、「TOPへもどるボタン」は正常に動作しているため、記述場所の間違いというのも当てはまりません。


1.1 jQuery本体を読み込んでいない
1.2 jQuery本体のバージョンが適したものでない
1.3 jQuery本体を複数読み込んでいる
1.4 scriptタグの使い方を学んでいない（よくわかっていない）
1.5 インターネット接続が切れている
1.6 URLパスの間違い=必要ファイルが読み込まれていない
1.7 別途読み込む必要があるスクリプトを読み込んでいない
1.8 HTMLに記述ミスがある
1.9 セレクター記述にミスがある
1.10 jQuery以外のライブラリと競合している
1.11 jQuery同士・jQueryプラグイン同士が競合している
1.12 head内かbody閉じタグ直前か、記述場所が違う
1.13 jQueryのCSSが他のCSSと競合している
1.14 (function($){ … }(jQuery)) で囲んでいない



浮かび上がってきましたね…よく分からないまま人様の作ったプラグインをコピペで導入する初心者のありがちなミスが(笑)



最近導入したウィジェットでjQueryを利用しているものが一つ、ありました。

それは、bloggerの「前の投稿」「次の投稿」を記事タイトルに変えるウィジェットです。

参考にしたサイトはコチラ

前後記事タイトルを表示させるウィジェット

このウィジェットを削除してみたところ、ハンバーガーメニューが動くようになりました！

なおった！

原因が分かって一安心。

しかし、前後記事タイトルウィジェットは大変便利で気に入っているため、このまま削除してしまうのは惜しい。

そこで、公開されているコードから、jQueryの読み込みに関する記述をマルッと削除し、再度ウィジェットに追加してみました。

HTML

<scripttype="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
#blog-pager-newer-link{font-size:100%;width:200px;text-align:left;}
#blog-pager-older-link{font-size:100%;width:200px;text-align:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+".post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link").text();
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+".post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt
});
});
</script>

結果、ハンバーガーメニューも「前後記事タイトルウィジェット」も両方正常に動き、問題は解決しました！

今回の不具合は、「jQuery本体を複数読み込んでいる」ことが原因でした。


ウィジェットがたくさんあって、どれが不具合なのか分からない場合は、bloggerのhtmlをメモ帳にコピペし、検索ウィンドウに「jquery.min.js」と入れてみてください。

複数読み込んでいる場合は、この方法で一発で分かります。

---

ポチっとよろしく♪