.slideDown()が機能しない?jQueryの読み込みを変えたらエラー解決!

この記事では、Web制作をしている時にjQueryの.slideDown()が機能しなかった時のエラー解決の方法を書いています。

 

実装したかった機能

はじめはヘッダーは非表示。

ページを下にスクロールすると、ヘッダーが上から降りてくるような機能。

 

問題点と試したこと

はじめの実装コード

jQueryで.slideDown()と.slideUp()を使えば実装できると考えました。

はじめに書いたコードはこんな感じ。

index.html
<header>
  <section class="header-menu">
    <nav>
      <li><a href="#top">TOP</a></li>
      <li><a href="#middle">middle</a></li>
      <li><a href="#bottom">bottom</a></li>
    </nav>
  </section>
</header>
<section id="top" class="top-wrapper">
<section id="middle" class="middle-wrapper">
<section id="bottom" class="bottom-wrapper">
sample.css
header {
  width: 100%;
  z-index: 10;
  position: fixed;
  display: none;
}
sample.js
$(function () {
  // scrollイベントを取得した際の処理を定義
  $(window).on("scroll", function () {
    // scrollTop()が0より大きい場合
    if ($(this).scrollTop() > $('.message-wrapper').offset().top) {
      // ヘッダーバーをslideDownして表示
      $("header").slideDown();
    } else {
      // ヘッダーバーをslideUpして非表示
      $("header").slideUp();
    }
  });
});

ですが、これではうまく実装できず。

問題点は.slideDown()と.slideUp()が機能しないこと

見出しのままですが、問題点は.slideDown()と.slideUp()が機能しないこと。

試したこと|JSが読み込まれているかチェック

なのJSが読み込まれているのか、JSに次のアラートのコードを書いてチェック。

sample.js
alert('JavaScriptのアラート');

ページを更新すると、きちんとページにアラートが表示されました。

これでJS(jQuery)がうまく読み込まれていると安心してしまいました。

これはjQueryに対するチェックにはなっていないんです。

そこに気づくまでに時間がかかりました。

 

原因と解決策|jQueryのCDNを変更したら解決

原因|jQueryのCDNが原因でした

ここから原因と解決策を書いていきます。

結論から言ってしまうと、jQueryのCDNが原因でした。

ぼくはこのWebページ制作でBootstrapを導入していました。

そこでjQueryの導入はBootstrapの公式サイトを参考に、以下のCDNを使用。

index.htmlの</body>直前
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

赤字のところが注目すべきポイントです。

Bootstrapの公式サイトにも記載があるとおり、ここではスリムバージョンのjQueryを読み込んでいます。

We use jQuery’s slim build, but the full version is also supported.

参考:Bootstrap公式サイト

このスリムバージョンでは、.slideDown()と.slideUp()には対応していないんです。

つまり、jQueryのCDNによる読み込み方には何通りかあって、対応する機能の範囲が違う。

今回はスリムバージョンでは対応外の.slideDown()と.slideUp()を使っていたので、機能しなかったということです。

 

解決策|jQueryのCDNを変更

解決策はシンプルでjQueryのCDNを変更したら解決できました。

index.htmlの</body>直前
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

BootstrapもフルバージョンのjQueryに対応しているということなので安心。

We use jQuery’s slim build, but the full version is also supported.

参考:Bootstrap公式サイト

 

まとめ|jQueryのCDNには種類がある

.slideDown()と.slideUp()が機能しない原因はjQueryのCDN。

jQueryのCDNにはいろいろ種類があって、対応している範囲が違う。

今回は.slideDown()と.slideUp()に対するエラー解決でしたが、対応範囲が違うというのは他にもたくさんありそうなこと。

だから対応範囲やバージョン確認をするという考え方はぜひ身につけておきたいと感じました!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です