技術標籤：csscss3html

使用純css實現展開與收起的效果

提示：以下是本篇文章正文內容，下面案例可供參考
程式碼如下（示例）：

1.HTML

<section class="errorReason">
          <input type="checkbox" />
          <div class="case-errorReason">
            <div>展開</div>
            <div>收起<
 
/div>
          </div>
          <div class="errorText">
            我累了,讓我休息一會！我累了,讓我休息一會！我累了,讓我休息一會！我累了,讓我休息一會！我累了,讓我休息一會！我累了,讓我休息一會！我累了,讓我休息一會！我累了,讓我休息一會！我累了,讓我休息一會！我累了,讓我休息一會！我累了,讓我休息一會！我累了,讓我休息一會！我累了,讓我休息一會！
          </div>
        </section>

2.CSS

程式碼如下（示例）：

.
 
errorReason {
  position: relative;
  width: 396px;
  color: #aaaaaa;
  line-height: 18px;
  margin-top: 7px;
}

.errorReason > .case-errorReason {
  color: #457af5;
  position: absolute;
  bottom: -13px;
  right: 0;
}

.errorReason > .errorText {
  word-break: break-all;
  overflow: hidden;
}

.
 
errorReason > .case-errorReason div:nth-of-type(1) {
  display: none;
}

.error .errorMessage > .errorReason > .case-errorReason div:nth-of-type(2) {
  display: block;
}

.errorReason > [type='checkbox'] {
  position: absolute;
  display: block;
  width: 24px;
  height: 18px;
  z-index: 1000;
  opacity: 0;
  bottom: -13px;
  right: 0;
}

.errorReason > [type='checkbox']:checked + .case-errorReason div:nth-of-type(1) {
  display: block;
}

 .errorReason > [type='checkbox']:checked + .case-errorReason div:nth-of-type(2) {
  display: none;
}

.errorReason > [type='checkbox']:checked + .case-errorReason + .errorText {
  max-height: 36px;
}