今回はJQueryでもよく使うアコーディオン・slideToggleなどを使ったときの不具合について、対処法を含めて紹介します。なぜ今更アコーディオンやslideToggleに悩んでいると思う方もいるかもしれません。
私自身も今まで気にしていなかったのですが、最近作業をしているとslideToggleのがたつき・カックンに遭遇したからであります。今回はいくつかあるアコーディオンやslideToggleのがたつき・カックンの対処法の中で、私の場合に解決できた対処法をお伝えします。
slideToggleのがたつき・カックンの対処法
まずslideToggleがたつき・カックンが発生した場合、今までは下記方法で対処してきました。
・開閉する対象にtransitionを設定する
しかし両方の対処法を試してみたが、今回は解決しない！！
気になるところは、がたつき・カックンの特徴です。開く時の最後にカックンとなるのです。
そこでいろいろと調査したところ、わかったことをお伝えします。
まずは今回のHTMLの簡略したコードです。
<dl>
<dt>クリックイベント</dt>
<dd>
<!-- 開閉対象 -->
<p>テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・</p>
<p>テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・</p>
</dd>
</dl>dtタグの部分でクリックイベントを発生させて、ddタグを開くよくあるパターンです。
ここに何が原因があったかというと、ddタグに上下どちらかにpaddingを設定していると、開く際の最後にがたつき・カックンが発生することがわかりました。今までまったく意識してこなかったのですが、最近がたつき・カックンが気になるなと思っていたところ、開閉対象に設定している上下どちらかのpaddingが原因でした。
この場合のslideToggleのがたつき・カックンの対処法は、ddタグにpaddingを設定するのではなく、内側のpタグにpaddingを設定すると改善しました。
・・・今まで全然そんなことを意識していなく、そんな不具合も発生していなかったように思うのだけど・・・・、あまり考えないことにしよう^^;
slideToggleの開閉時のがたつき・カックンの対処法まとめ
JQueryのアコーディオン・slideToggleの開閉時のがたつき・カックンの対処法について紹介してきました。
エッ今更～～と思われた方もいるかもしれません。
制作の仕事をしている中でも、今更聞けないことや・えっそうなの知らなかったということは、誰でも経験することだと思います。むしろその積み重ねで、不具合の解決方法を増やしていると考えていくことが、良いと考えます。
