WordPress Elementor产品卡片按钮集成外部链接：实现内容动态显示

<div class="card">
  <div class="imgBox">
    <img src="https://toppng.com/uploads/thumbnail/valorant-11608280122mrhwm6iwqx.png" alt="mouse corsair" class="mouse">
  </div>
  <div class="contentBox">
    <h3>Mouse Corsair M65</h3>
    <h2 class="price">61.<small>98</small> €</h2>
    <!-- 这是我们的目标按钮，添加onclick事件 -->
    <a href="#" class="buy" onclick="toggleVisibility('calendlyWidgetContainer')">BRONEERI</a>
  </div>
</div>

<div class="card">
  <!-- ... 产品卡片其他内容 ... -->
  <div class="contentBox">
    <h3>Mouse Corsair M65</h3>
    <h2 class="price">61.<small>98</small> €</h2>
    <a href="#" class="buy" onclick="toggleVisibility('calendlyWidgetContainer')">BRONEERI</a>
  </div>

  <!-- Calendly组件容器，初始隐藏 -->
  <div id="calendlyWidgetContainer" style="min-width:320px;height:630px;display:none;">
    <!-- Calendly的iframe嵌入代码 -->
    <iframe src="https://calendly.com/mokez/neace?hide_gdpr_banner=1" style="width:100%; height:100%; border:none;"></iframe>
  </div>
  <!-- Calendly官方的widget.js脚本，如果Calendly需要它来正确渲染iframe或提供其他功能，则保留 -->
  <script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
</div>

<!-- ... 上面的HTML和CSS代码 ... -->

<script>
/**
 * 切换指定元素的显示/隐藏状态。
 * @param {string} elementId - 要切换显示状态的元素的ID。
 */
function toggleVisibility(elementId) {
    var element = document.getElementById(elementId);
    if (element) { // 确保元素存在
        if (element.style.display === "none") {
            element.style.display = "block"; // 将其显示为块级元素
            // 如果需要，可以在这里滚动到该元素
            // element.scrollIntoView({ behavior: 'smooth' });
        } else {
            element.style.display = "none"; // 将其隐藏
        }
    }
}
</script>

<div class="card">
  <div class="imgBox">
    <img src="https://toppng.com/uploads/thumbnail/valorant-11608280122mrhwm6iwqx.png" alt="mouse corsair" class="mouse">
  </div>

  <div class="contentBox">
    <h3>Mouse Corsair M65</h3>
    <h2 class="price">61.<small>98</small> €</h2>
    <a href="#" class="buy" onclick="toggleVisibility('calendlyWidgetContainer')">BRONEERI</a>
  </div>

  <!-- Calendly组件容器，初始隐藏 -->
  <div id="calendlyWidgetContainer" style="min-width:320px;height:630px;display:none;">
    <iframe src="https://calendly.com/mokez/neace?hide_gdpr_banner=1" style="width:100%; height:100%; border:none;"></iframe>
  </div>
  <script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
</div>

<style>
/* 产品卡片的基础样式 */
* {
  margin: 0;
  padding: 0;
  font-family: "Istok Web", sans-serif;
  box-sizing: border-box; /* 添加box-sizing */
}

.card {
  position: relative;
  width: 320px;
  height: 480px;
  background: #0f1923;
  border-radius: 20px;
  overflow: hidden;
  margin: 20px auto; /* 居中显示 */
}

.card::before {
  content: "";
  position: absolute;
  top: -50%;
  width: 100%;
  height: 100%;
  background: #ff4655;
  transform: skewY(345deg);
  transition: 0.5s;
}

.card:hover::before {
  top: -70%;
  transform: skewY(390deg);
}

.card::after {
  content: "CORSAIR";
  position: absolute;
  bottom: 0;
  left: 0;
  font-weight: 600;
  font-size: 6em;
  color: rgba(0, 0, 0, 0.1);
}

.card .imgBox {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  z-index: 1;
}

.card .contentBox {
  position: relative;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 2;
}

.card .contentBox h3 {
  font-size: 18px;
  color: white;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.card .contentBox .price {
  font-size: 24px;
  color: white;
  font-weight: 700;
  letter-spacing: 1px;
}

.card .contentBox .buy {
  position: relative;
  top: 100px; /* 初始隐藏在下方 */
  opacity: 0;
  padding: 10px 30px;
  margin-top: 15px;
  color: #FFFFFF;
  text-decoration: none;
  background: #ff4655;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: 0.5s;
}

.card:hover .contentBox .buy {
  top: 0; /* 鼠标悬停时显示 */
  opacity: 1;
}

.mouse {
  height: 300px;
  width: auto;
}
</style>

<script>
function toggleVisibility(elementId) {
    var element = document.getElementById(elementId);
    if (element) {
        if (element.style.display === "none") {
            element.style.display = "block";
            // 可选：显示后滚动到该元素，提升用户体验
            // element.scrollIntoView({ behavior: 'smooth', block: 'start' });
        } else {
            element.style.display = "none";
        }
    }
}
</script>