jQueryの.slideUp()や.slideDown()で動かない問題の対処法！
jQueryの.slideUp()や.slideDown()が効かない問題の対処法についてサンプルコード付きで解説します。jQueryの.slideUp()や.slideDown()が効かない原因としては主に2つあります。その原因と解決策をそれぞれ解説します。
jQueryの.slideUp()や.slideDown()で動かない問題
jQueryの.slideUp()や.slideDown()が効かない問題というのはよく目にします。
実際に.slideUp()や.slideDown()が効かない例として以下のようなものがあります。
下記のサンプルコードをを見てみましょう。「Menu」をクリックしてみて下さい。
.slideUp()は機能しますが、.slideDown()が機能しないことが分かります。
上記のサンプルコードのように.slideUp()は効いているのに、.slideDown()が効かないです。
以降こちらの解決策を解説します。
jQueryの.slideUp()や.slideDown()で動かない問題の対処法
ではjQueryの.slideUp()や.slideDown()で動かない問題の対処法について解説します。
jQueryの.slideDown()で動かない問題の原因
display:noneが付く箇所に着目
1つ目のサンプルコードの.slideDown()がなぜ効かなかったというと$('.nav > *').slideUp();でnav要素にdisplay:none;が付くと思いきや、実際にdisplay:none;が付いているのはその1つ下の子要素であるul要素に付いていることが分かります。
このようにJQueryで要素として設定した1つ下の子要素にdisplay:none;が付くことが、jQueryの.slideDown()で動かない問題の原因だと考えられます。
jQueryのCDNがslim版になっている
またもう一つ.slideUp()や.slideDown()が効かないときの原因として、jQueryのCDNでslim版を読み込んでいるということが挙げられます。
full版でないと.slideUp()や.slideDown()は使えません。
jQueryの.slideDown()で動かない問題の対処法
display:noneが付く箇所に着目した場合
display:noneが付く箇所に着目した場合、1つ目のサンプルコードをif ($('.nav').is(':visible'))ではなくて、if ($('ul').is(':visible'))とすると解決します。
このように.slideDown()も効いていることが分かります。
今後.slideUp()や.slideDown()を用いるときは「検証ツール」でどこにdisplay:none;が付くかを確かめながら実装するとうまくいくと思います。
jQueryのCDNをfull版にしよう
slim版では.slideUp()や.slideDown()が効かないので、jQueryのCDNを読み込む際はfull版を使用してください。
full版は以下のコードとなります。
jQueryのCDN(full版)
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>まとめ
いかがでしたでしょうか？
ここで紹介したようにうまく検証ツールを使用しながら、jQueryの.slideUp()や.slideDown()を実装してみてください。
