如何實現(xiàn)CSS中的展開和收縮效果

在CSS中，我們可以使用transition屬性來實現(xiàn)展開和收縮效果，我們需要為元素定義兩個狀態(tài)：展開狀態(tài)和收縮狀態(tài)，我們可以使用JavaScript來切換這兩個狀態(tài)，在切換過程中，我們可以使用CSS的transition屬性來平滑過渡效果。

下面是一個簡單的示例代碼：

HTML代碼：

<div id="mydiv">展開/收縮內(nèi)容</div>

CSS代碼：

#mydiv {
  width: 200px;
  height: 200px;
  background-color: #f00;
  transition: width 2s, height 2s;
}
#mydiv.expanded {
  width: 400px;
  height: 400px;
}

JavaScript代碼：

var mydiv = document.getElementById('mydiv');
var isExpanded = false;
mydiv.onclick = function() {
  if (isExpanded) {
    mydiv.style.width = '200px';
    mydiv.style.height = '200px';
  } else {
    mydiv.style.width = '400px';
    mydiv.style.height = '400px';
    mydiv.classList.add('expanded');
  }
  isExpanded = !isExpanded;
}

在這個示例中，我們定義了一個名為mydiv的div元素，并為其定義了展開和收縮的樣式，在JavaScript中，我們定義了一個點擊事件處理器，用于切換元素的展開和收縮狀態(tài)，當(dāng)用戶點擊元素時，JavaScript代碼會檢查當(dāng)前狀態(tài)，并根據(jù)狀態(tài)切換樣式，我們使用isExpanded變量來跟蹤當(dāng)前狀態(tài)，以便在下次點擊時能夠正確地切換狀態(tài)。