如何使用 HTML、CSS 和 JavaScript 建立展開卡片

在本教程中，我們將學習如何使用 HTML、CSS 和 JavaScript 建立展開卡片。我們還將學習如何使用一些額外的 CSS 屬性來使我們的展開卡片更具吸引力。

什麼是展開卡片？

展開卡片是一種可以展開以顯示更多內容的卡片型別。它們通常用於顯示其他

如何使用 HTML、CSS 和 JavaScript 建立展開卡片？

要建立展開卡片，我們需要使用以下 HTML 元素：

  • 卡片容器元素：這將是包含我們所有卡片的元素。我們將為此元素提供一個名為 "expanding−cards" 的 id。

  • 卡片元素：這將是包含每個單獨卡片內容的元素。我們將為此元素提供一個名為 "card" 的類。

  • 卡片標題元素：這將是包含每個卡片標題的元素。我們將為此元素提供一個名為 "card−header" 的類。

  • 卡片主體元素：這將是包含每個卡片主體內容的元素。我們將為此元素提供一個名為 "card−body" 的類。

  • 卡片腳註元素：這將是包含每個卡片腳註的元素。我們將為此元素提供一個名為 "card−footer" 的類。

CSS

現在我們已經設定了 HTML，讓我們使用 CSS 樣式化我們的卡片。

首先，我們將為卡片容器設定一些基本樣式：

#expanding-cards { 
   width: 100%; 
   max-width: 960px;
   margin: 0 auto;
}

接下來，我們將樣式化我們的單個卡片：

.card { 
   width: 100%; 
   border: 1px solid #ccc; 
   border-radius: 4px; 
   overflow: hidden; 
}

現在，讓我們樣式化我們的卡片標題：

.card-header { 
   padding: 15px; 
   background-color: #f5f5f5; 
   border-bottom: 1px solid #ccc; 
}
.card-header h3 {
   margin: 0; 
   font-size: 16px; 
}

我們的卡片主體將有一些額外的操作：

.card-body {
   padding: 15px; 
}
.card-body p { 
   margin: 0; 
   font-size: 14px; 
   line-height: 1.5; 
}

最後，我們的卡片腳註：

.card-footer { 
   padding: 15px; 
   background-color: #f5f5f5;
   border-top: 1px solid #ccc; 
}

JavaScript

現在我們的 HTML 和 CSS 都已設定好，讓我們編寫一些 JavaScript 程式碼，使我們的卡片在點選時展開和摺疊。

首先，我們需要選擇我們的卡片元素：

var cards = document.querySelectorAll('.card');

接下來，我們將建立一個函式，該函式將在我們的卡片上切換展開類：

function toggleExpanded() { 
   this.classList.toggle('expanded'); 
}

最後，我們將遍歷我們的卡片元素併為點選事件新增一個事件偵聽器：

for(var i = 0; i < cards.length; i++) { 
   cards[i].addEventListener('click', toggleExpanded);
}

就是這樣！現在，當您點選卡片時，它將展開以顯示更多內容。

其他 CSS

如果您想將您的展開卡片提升到一個新的水平，您可以嘗試新增一些其他 CSS

首先，讓我們新增一些過渡效果，使我們的卡片平滑地展開和摺疊：

.card { 
   transition: all 0.3s ease-out; 
}
.card.expanded { 
   transform: scale(1.1);
}

接下來，讓我們為我們的卡片新增一個懸停狀態

.card:hover { 
   box-shadow: 0px 0px 10px rgba(0,0,0,0.3); 
   cursor: pointer; 
}

最後，讓我們新增一些媒體查詢，以便我們的卡片在移動裝置上看起來不錯：

@media (max-width: 768px) { 
   .card {
      width: 100%; 
   }
}

完整的工作程式碼

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
      #expanding-cards {
         width: 100%;
         max-width: 960px;
         margin: 0 auto;
      }
      .card {
         width: 100%;
         border: 1px solid #ccc;
         border-radius: 4px;
         overflow: hidden;
         transition: all 0.3s ease-out;
      }
      .card.expanded {
         transform: scale(1.1);
      }
      .card:hover {
         box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
         cursor: pointer;
      }
      .card-header {
         padding: 15px;
         background-color: #f5f5f5;
         border-bottom: 1px solid #ccc;
      }
      .card-header h3 {
         margin: 0;
         font-size: 16px;
      }
      .card-body {
         padding: 15px;
      }
      .card-body p {
         margin: 0;
         font-size: 14px;
         line-height: 1.5;
      }
      .card-footer {
         padding: 15px;
         background-color: #f5f5f5;
         border-top: 1px solid #ccc;
      }
      @media (max-width: 768px) {
         .card {
         width: 100%;
      }
   }
   </style>
</head>
<body>
   <div><h3> Click anywherer on the cart to see the expanding effect</h3></div>
   <div id="expanding-cards">
   <div class="card">
   <div class="card-header">
   <h3>Card 1</h3>
   </div>
   <div class="card-body">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum.</p>
   </div>
   <div class="card-footer">
   <a href="#">Read More</a>
   </div>
   </div>
   <div class="card">
   <div class="card-header">
   <h3>Card 2</h3>
   </div>
   <div class="card-body">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum.</p>
   </div>
   <div class="card-footer">
   <a href="#">Read More</a>
   </div>
   </div>
   <div class="card">
   <div class="card-header">
   <h3>Card 3</h3>
   </div>
   <div class="card-body">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum.</p>
   </div>
   <div class="card-footer">
   <a href="#">Read More</a>
   </div>
   </div>
   </div>
   <script>
      var cards = document.querySelectorAll('.card');
      function toggleExpanded() {
         this.classList.toggle('expanded');
      }
      for(var i = 0; i < cards.length; i++) {
         cards[i].addEventListener('click', toggleExpanded);
      }
   </script>
</body>
</html>

更新於： 2022年9月14日

3K+ 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告