如何使用 HTML、CSS 和 JavaScript 创建展开卡片

在本教程中，我们将学习如何使用 HTML、CSS 和 JavaScript 创建展开卡片。我们还将学习如何使用一些额外的 CSS 属性来使我们的展开卡片更具吸引力。

什么是展开卡片？

展开卡片是一种可以展开以显示更多内容的卡片类型。它们通常用于显示其他

如何使用 HTML、CSS 和 JavaScript 创建展开卡片？

要创建展开卡片，我们需要使用以下 HTML 元素：

  • 卡片容器元素：这将是包含我们所有卡片的元素。我们将为此元素提供一个名为 "expanding−cards" 的 id。

  • 卡片元素：这将是包含每个单独卡片内容的元素。我们将为此元素提供一个名为 "card" 的类。

  • 卡片标题元素：这将是包含每个卡片标题的元素。我们将为此元素提供一个名为 "card−header" 的类。

  • 卡片主体元素：这将是包含每个卡片主体内容的元素。我们将为此元素提供一个名为 "card−body" 的类。

  • 卡片脚注元素：这将是包含每个卡片脚注的元素。我们将为此元素提供一个名为 "card−footer" 的类。

Learn JavaScript in-depth with real-world projects through our JavaScript certification course. Enroll and become a certified expert to boost your career.

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%; 
   }
}

完整的工作代码

Open Compiler
<!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+ 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告