CSS3實現(xiàn)折疊導(dǎo)航的方法

在CSS3中，我們可以使用transition和transform屬性來實現(xiàn)折疊導(dǎo)航，以下是一種簡單的方法：

我們需要創(chuàng)建一個包含導(dǎo)航鏈接的HTML結(jié)構(gòu)，每個鏈接都用一個標(biāo)簽包裹，

<div class="nav-item">
  <a href="#">鏈接1</a>
</div>
<div class="nav-item">
  <a href="#">鏈接2</a>
</div>
<div class="nav-item">
  <a href="#">鏈接3</a>
</div>

我們可以使用CSS3的transition和transform屬性來定義折疊動畫，我們可以將每個導(dǎo)航項的高度設(shè)置為0，并使用transition屬性來平滑過渡：

.nav-item {
  height: 0;
  transition: height 0.3s ease;
}

我們可以使用JavaScript來切換每個導(dǎo)航項的高度，我們可以編寫一個函數(shù)來切換指定導(dǎo)航項的高度：

function toggleHeight(item) {
  item.style.height = item.offsetHeight ? 0 : 'auto';
}

我們可以將這個函數(shù)綁定到每個導(dǎo)航鏈接的點擊事件上，以實現(xiàn)折疊導(dǎo)航的效果。

var links = document.querySelectorAll('.nav-item a');
for (var i = 0; i < links.length; i++) {
  links[i].addEventListener('click', function(e) {
    e.preventDefault();
    toggleHeight(e.target.closest('.nav-item'));
  });
}

通過以上代碼，我們就可以實現(xiàn)一個簡單的折疊導(dǎo)航效果，這只是一個基本的實現(xiàn)，我們還可以根據(jù)具體需求進(jìn)行進(jìn)一步的定制和優(yōu)化。