scss アコーディオン:リスト型:アニメーション Posted 2021-05-17
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss アコーディオン:リスト型:アニメーション相关的知识,希望对你有一定的参考价值。
アコーディオン:リスト型:アニメーション
--------------------
A [Pen](https://codepen.io/anonie/pen/dybZEyQ) by [anonie](https://codepen.io/anonie) on [CodePen](https://codepen.io).
[License](https://codepen.io/anonie/pen/dybZEyQ/license).
<div class="inner">
<div class="item01">
<ul class="c-accordionL">
<dl class="c-accordionL-item">
<dt class="c-accordionL-item__ttl">アコーディオンitem01-title<p class="c-accordionL-item__arrow">+</p></dt>
<dd class="c-accordionL-item__txt">
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
</dd>
</dl>
<dl class="c-accordionL-item">
<dt class="c-accordionL-item__ttl">アコーディオンitem01-title<p class="c-accordionL-item__arrow">+</p></dt>
<dd class="c-accordionL-item__txt">
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
</dd>
</dl>
</ul>
</div>
</div>
$(function(){
$('.c-accordionL-item').click(function(){
if( $(this).hasClass('is_active') ) {
$(this).removeClass('is_active');
$(this).find('.c-accordionL-item__txt').slideUp();
$(this).find('.c-accordionL-item__arrow').text('+');
} else {
$(this).addClass('is_active');
$(this).find('.c-accordionL-item__txt').slideDown('fast');
$(this).find('.c-accordionL-item__arrow').text('-');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
*, *::before, *::after { box-sizing: border-box; }
body { background: #eee; }
.flex { display: flex; }
.inner {
width: 100%;
max-width: 900px;
margin: 0 auto;
}
.inner { background: #fff; margin: 3rem auto; padding: 3rem 0;} // 視認性用
.item01 { // 視認性用
border: 3px solid #aaa;
}
.item02 { // 視認性用
border: 3px solid #ccc;
}
@mixin media($breakpoint) {
@media #{map-get($breakpoints, $breakpoint)} {
@content;
}
}
/// 以下モジュール ---------------------------------
.c-accordionL {
transition: 0.2s;
&-item {
margin-bottom: 1em; // 視認性用
&__ttl {
background: #eee; // 視認性用
}
&__ttl {
position: relative;
cursor: pointer;
}
&__txt {
transition: .2s;
display: none;
.is_active & {
// display: block;
}
}
&__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 1em;
}
}
}
以上是关于scss アコーディオン:リスト型:アニメーション的主要内容,如果未能解决你的问题,请参考以下文章
csharp ランダムテキストアニメーション
scss アコーディオン:モバイル时のみ「続きを表示する」
scss 木村さん_ホテルオリエンタル心斎桥アニメーション
javascript アコーディオン
javascript アコーディオンパネル
css アコーディオン