html中的li簡(jiǎn)單的顯示和隱藏

小億
245
2023-12-19 14:50:00

要在HTML中簡(jiǎn)單地顯示和隱藏

  • 元素，可以使用CSS的display屬性。以下是一種方法：

    首先，在HTML中添加一個(gè)按鈕和一個(gè)

      列表：

      <button onclick="toggleList()">顯示/隱藏列表</button>
<ul id="myList">
  <li>列表項(xiàng)1</li>
  <li>列表項(xiàng)2</li>
  <li>列表項(xiàng)3</li>
</ul>

      然后，在JavaScript中添加一個(gè)函數(shù)來(lái)切換列表的顯示狀態(tài)：

      function toggleList() {
  var list = document.getElementById("myList");
  if (list.style.display === "none") {
    list.style.display = "block";
  } else {
    list.style.display = "none";
  }
}

      這個(gè)函數(shù)會(huì)獲取id為"myList"的

        元素，并檢查它的display屬性。如果display屬性的值是"none"，則將其設(shè)置為"block"，從而顯示列表。如果display屬性的值不是"none"，則將其設(shè)置為"none"，從而隱藏列表。

        最后，可以通過(guò)點(diǎn)擊按鈕來(lái)觸發(fā)toggleList函數(shù)，從而顯示/隱藏列表。

        這只是一種簡(jiǎn)單的方法，還有其他的方法可以實(shí)現(xiàn)顯示和隱藏

      • 元素，例如使用jQuery庫(kù)或CSS的visibility屬性等。

    • 0 踩