ニケッチャニッキ

はてなブログ・WordPressカスタマイズ・Androidプログラミング

jQueryが動かない原因と対処方法~SSL化によるCDN読み込みエラーに注意

f:id:niketcha:20190725142011p:plain

私が運営しているもう一つのブログ「ニケッチャ×レコメンド」にナビゲーションメニューを付けました。マウスオーバーでサブカテゴリーが表示され、スマホではトグルメニューが表示されるというものです。

コピペでOKのサイトを参考にしたのですが、トグルメニューがうまく動かない。使われていたのはslideToggleでした。

色々検証したところ、原因がわかりましたので紹介します。

jQueryが動かなかった原因

ソースをコピペで動かなかった原因は、読み込んでいるCDNの問題でした。コピペ元ではhttp://~のソースを読んでいましたが、私のサイトはSSL化しています。SSL化したサイトでは、https://から始まるCDNでないと読み込むことができないんですね。

f:id:niketcha:20190725140935p:plain

Chromeデベロッパー・ツールにもエラーが出ていました。

jQueryが動かなくて困っている方は、chromeでF12を押して確認してみてください。

ナビゲーションメニューを参考にしたサイト

ナビゲーションメニューの実装には下記のサイトを参考にさせていただきました。

www.yukihy.com

そのまま使うとスクロールバーが消えたり動かせなくなってしまいました。heightを100%やautoにしているあたりが原因みたいでしたが、デザインを崩さずに直す方法がわからなかったので、とりあえず次のcssを入れて対処しました。

div#container {
    overflow: scroll;
    height: 100vh;
}