在Web開發中，經常會使用到

標簽來展示列表內容，但是有時候我們需要展示的列表較長，會導致頁面比較長，不太美觀。因此我們可以使用CSS來實現
的折疊顯示，這樣不僅可以減少頁面長度，還能夠讓頁面更加美觀。

下面是實現

折疊顯示的CSS代碼：

ul{
display: none;
}
li{
list-style: none;
}
ul.show{
display: block;
}

我們可以看到，以上代碼中，我們給

加上了“display:none”這個屬性，這樣頁面中就不會展示列表內容。然后我們給每個
• 加上“list-style:none”這個屬性，這樣列表前面的小圓點就不會顯示了。

  接著，我們可以定義一個包含“.show”類的CSS樣式，這個類用來在需要展示列表時給

  加上這個類，實現折疊顯示。

  最后，我們可以通過JavaScript來實現點擊展開和折疊列表的功能：

  var ul = document.querySelector("ul");
  ul.addEventListener("click", function(){
  if(ul.classList.contains("show")){
  ul.classList.remove("show");
  }
  else{
  ul.classList.add("show");
  }
  });

  以上JavaScript代碼中，我們通過querySelector方法獲取到頁面上的

  標簽，然后給它添加了一個點擊事件，在點擊時判斷
  是否含有“.show”這個類，如果有，就移除這個類，實現折疊效果；如果沒有，就添加這個類，實現展開效果。

  通過以上的CSS和JavaScript代碼，我們就可以很容易地實現

  的折疊顯示功能。