2018/04/26

Category :
Tags :
最近jQueryのtoggleを使用してアコーディオンを実装していると下記が気になり始めた・・・・・・
- クリックした回数分、律儀にトグルするので高橋名人ばりの16連打には到底耐えられない。
- トグルされる中身が充実している時など動きがもっさりする
色々ググってみるとCSS3のみでなどやり方が何種類かあるみたいでしたが
- ある一定以上の高さになると高さがおかしい。
- CSSが少々複雑になり個人的に作りが気持ち悪い。
動作を気持ちよくし連続トグルの問題が解決出来ればよいのでCSS3のみではなく少々のJavaScriptで自作。
トグル以外の箇所も毎回同じ処理を施すので内部的に記述。
自作CSS3系toggleの仕様
- トグルトリガー部分の次にくるコンテンツが必ずトグルする。
- トグルされた状態(開いている状態は)ではトグルトリガー部分とトグルコンテンツ部分に.state-activeが付加される。
- CSS3アニメのライブラリはvelocity.jsを使用。
HTML
装飾用にクラスが色々ついていますが.jsToggleの次のコンテンツがトグルされる事にになります。
この辺はjQueryのtoggleを使用するのと同じ感じで大丈夫。
<ul class="list-toggle">
<li>
<a href="#" class="jsToggle list-toggle-a">KEPRATEってなんて読むのですか?</a><!--ここがクリックされる箇所 -->
<div class="list-toggle-con"><!--ここがトグルされる箇所 -->
<div class="list-toggle-con-inner">
<p class="fs-m">ケプレイトと読みます。<br>ちなみにgoogleでケプレイトを検索をかけても一切引っかかりません。<span class="f-bold fs-l"
>「もしかしてケプラート」</span>など言われる始末です。<br>ケプレイトでも検索されるようにがんばります。<br>ちなみにkeprateで検索しても知らない外国人の方がたくさんHITします。もちろん本人ではございません。日本語の方もちろん大丈夫ですのでご安心ください。</p>
</div>
</div>
</li>
</ul>
</body>直前にjsファイルを読み込み以下を記述。
自作のtoggleCSS3()関数を呼び出すのみ。
- ※jQueryとvelocity.jsは各自用意してください。
<script src="./assets/js/lib.js"></script>;<!--lib.jsに必要なライブラリを格納しています -->
<script src="./assets/js/toggle-css3.js"></script>
<script>
$(function() {
$(".jsToggle").on("click", function() {
$(this).toggleCSS3();
return false;
});
});
</script>
CSS
以下重要な箇所のcss。
jQueryのtoggle系はdisplay:none;を指定していましたが
自作版は高さを0にし、overflowをhiddenに設定して見える範囲をマスクな感じにしています。
- ※JavaScriptで本来の高さを取得します。
.list-toggle-con {
height: 0;
overflow: hidden;
}
JavaScript
ポイントとして10行目から13行目で
トグルされるコンテンツの高さを0からautoに変更して本来の高さを取得して再度0に戻しCSS3アニメーションさせます。
あとはstate-activeのクラスをadd,removeしているだけです。
;
(function($) {
$.fn.toggleCSS3 = function() {
var toggleCon = $(this).next();
if (!toggleCon.hasClass('state-active')) {
toggleCon.css('height', 'auto');
var h = toggleCon.innerHeight();
toggleCon.css('height', 0);
toggleCon.stop().velocity({ height: h }, 300, "easeInQuad");
toggleCon.addClass("state-active");
} else {
toggleCon.stop().velocity({ height: 0 }, 300, "easeInQuad");
toggleCon.removeClass("state-active");
}
};
})(jQuery);
これでトグルもっさり生活から抜け出せそうです・・・
- ※ソースの流用、改変は自由ですが自己責任とさせていただきます。
トラックバック URL
https://keprate.com/web/javascript/toggle-css3/trackback/