本文目錄導(dǎo)讀：

1. 使用CSS實現(xiàn)展開折疊效果
2. 優(yōu)化與擴(kuò)展

CSS實現(xiàn)展開折疊效果的方法

在Web開發(fā)中，我們經(jīng)常需要實現(xiàn)一些交互效果，如展開折疊效果，下面我們將介紹如何使用CSS來實現(xiàn)這一效果。

使用CSS實現(xiàn)展開折疊效果

我們需要創(chuàng)建一個HTML元素，通常是一個列表項（li）或段落（p），然后我們將使用CSS來添加展開折疊的效果。

1、創(chuàng)建一個HTML元素：

<li class="expandable">
  <div class="content">
    <p>這是展開折疊的內(nèi)容</p>
  </div>
  <div class="arrow">?</div>
</li>

2、添加CSS樣式：

.expandable {
  position: relative;
  line-height: 2; /* 假設(shè)列表項或段落的高度為2行 */
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: height 0.5s; /* 添加過渡效果 */
}
.arrow {
  position: absolute;
  right: 0;
  top: 0;
  width: 20px; /* 箭頭寬度 */
  height: 20px; /* 箭頭高度 */
  background-color: #f0f0f0; /* 箭頭背景色 */
  border: 1px solid #ccc; /* 箭頭邊框 */
  border-radius: 3px; /* 箭頭圓角 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* 箭頭陰影 */
  cursor: pointer; /* 添加鼠標(biāo)指針 */
}

3、添加JavaScript代碼：

我們將使用JavaScript來監(jiān)聽箭頭的點擊事件，并切換內(nèi)容的高度。

document.addEventListener('DOMContentLoaded', function() {
  var expandables = document.querySelectorAll('.expandable');
  expandables.forEach(function(item) {
    var content = item.querySelector('.content');
    var arrow = item.querySelector('.arrow');
    var isExpanded = false;
    arrow.addEventListener('click', function() {
      if (isExpanded) {
        content.style.height = '0'; // 折疊內(nèi)容
      } else {
        content.style.height = content.scrollHeight + 'px'; // 展開內(nèi)容
      }
      isExpanded = !isExpanded; // 切換狀態(tài)
    });
  });
});

優(yōu)化與擴(kuò)展

在實際應(yīng)用中，你可能需要對上述代碼進(jìn)行優(yōu)化和擴(kuò)展，以滿足更復(fù)雜的需求，你可以添加更多的樣式和動畫效果，或者支持多個級別的嵌套展開折疊，希望這些代碼能對你有所幫助！