CSS實(shí)現(xiàn)點(diǎn)擊展開(kāi)分類效果的方法

在Web開(kāi)發(fā)中，我們經(jīng)常需要實(shí)現(xiàn)點(diǎn)擊展開(kāi)分類效果，例如商品分類、新聞分類等，這種效果可以通過(guò)CSS和JavaScript來(lái)實(shí)現(xiàn)，下面是一種簡(jiǎn)單的方法，僅使用CSS和HTML，無(wú)需JavaScript。

我們需要準(zhǔn)備HTML結(jié)構(gòu)，假設(shè)我們有一個(gè)主分類和兩個(gè)子分類：

<div class="category">
  <div class="main-category">主分類</div>
  <div class="sub-category">子分類1</div>
  <div class="sub-category">子分類2</div>
</div>

我們使用CSS來(lái)設(shè)置樣式，假設(shè)我們想要點(diǎn)擊主分類時(shí)，子分類會(huì)展開(kāi)：

.category {
  position: relative;
  height: 50px;
  line-height: 50px;
  border: 1px solid #000;
  padding: 0 10px;
  cursor: pointer;
}
.sub-category {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  border-top: 1px solid #000;
  padding: 10px;
  display: none;
}

我們使用JavaScript來(lái)監(jiān)聽(tīng)點(diǎn)擊事件，并切換子分類的顯示狀態(tài)：

document.querySelector('.category').addEventListener('click', function() {
  var subCategories = document.querySelectorAll('.sub-category');
  for (var i = 0; i < subCategories.length; i++) {
    subCategories[i].style.display = (i === 0) ? 'block' : 'none';
  }
});

這種方法簡(jiǎn)單實(shí)用，無(wú)需復(fù)雜的動(dòng)畫和過(guò)渡效果，如果需要更多的樣式和交互效果，可以結(jié)合JavaScript和第三方庫(kù)來(lái)實(shí)現(xiàn)。