scss アコーディオン:リスト型:アニメーション

Posted

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 アコーディオン