本教程旨在指导用户如何在 WordPress Elementor 中，通过自定义产品卡片上的按钮触发动态内容的显示，例如嵌入式的 Calendly 预约组件。文章将详细介绍如何利用 HTML、CSS 和 JavaScript 结合，实现按钮点击后切换隐藏/显示外部内容的交互逻辑，并提供完整的代码示例及注意事项，帮助用户优化网站功能和用户体验。
1. 背景与问题分析
在 wordpress 网站上，特别是使用 elementor 等页面构建器时，我们经常会创建自定义的产品卡片或信息展示模块。有时，我们需要卡片上的某个按钮不仅仅是跳转链接，而是能动态地显示或隐藏一段复杂的外部内容，例如一个预约表单、一个弹出窗口或一个嵌入式组件。
传统的 标签通过 href 属性可以直接跳转到新页面或锚点。但当目标是“在当前页面显示/隐藏一段内容”时，就需要借助 JavaScript 来实现这种动态交互。本例中，用户希望产品卡片上的“BRONEERI”按钮能显示一个 Calendly 预约组件，而不是跳转。
2. 解决方案概述
核心思路是利用 JavaScript 来控制目标内容的 display 样式属性，实现其在“隐藏”（display: none;）和“显示”（display: block; 或其他合适的值）之间的切换。
具体步骤包括：
修改按钮：为产品卡片上的按钮添加一个 onclick 事件，使其在点击时调用一个 JavaScript 函数。封装目标内容：将需要动态显示/隐藏的 Calendly 嵌入代码（或其他外部内容）包裹在一个 div 容器中，并为其设置一个唯一的 id，初始状态设为隐藏。编写 JavaScript 逻辑：创建一个 JavaScript 函数，通过 id 获取到该容器，并切换其 display 属性。
3. 实现步骤与代码示例
3.1 调整 HTML 结构
首先，我们需要对产品卡片的 HTML 代码进行修改，并引入 Calendly 嵌入内容。
原产品卡片按钮部分：
修改后的按钮和 Calendly 嵌入部分：
将 Calendly 嵌入代码放入一个带有 id=”showandhide” 的 div 容器中，并将其初始样式设置为 display:none;。同时，修改按钮的 href 为 #（防止页面跳转），并添加 onclick=”showelement()” 事件。
@@##@@<!-- -->
说明：
我们将 Calendly 的 URL 直接放入 div 容器 id=”showandhide” 及其 style=”display:none;” 是实现隐藏/显示的关键。onclick=’showelement()’ 会在按钮被点击时触发名为 showelement 的 JavaScript 函数。
3.2 编写 JavaScript 逻辑
接下来，创建 showelement() 函数来控制 #showandhide 元素的显示状态。
function showelement() { const calendlyWidget = document.querySelector('#showandhide'); if (calendlyWidget.style.display === "none") { // 如果当前是隐藏状态，则显示 calendlyWidget.style.display = "block"; // 调整父元素高度以适应新内容，如果需要 // document.querySelector('.card').style.height = 'auto'; } else { // 如果当前是显示状态，则隐藏 calendlyWidget.style.display = "none"; // 恢复父元素高度，如果需要 // document.querySelector('.card').style.height = '480px'; }}
说明：
document.querySelector(‘#showandhide’) 用于获取 ID 为 showandhide 的 HTML 元素。通过检查 calendlyWidget.style.display 的值，判断当前元素的显示状态。calendlyWidget.style.display = “block”; 将元素设置为块级显示。calendlyWidget.style.display = “none”; 将元素设置为隐藏。代码中注释掉的部分展示了如何根据需要调整父容器（如 .card）的高度，以避免内容溢出或留白过多。这在内容动态显示后改变了整体布局时非常有用。
3.3 保持 CSS 样式
原有的产品卡片 CSS 样式可以保持不变，以确保卡片的视觉效果。
/* 保持原有产品卡片样式 */* { margin: 0; padding: 0; font-family: "Istok Web", sans-serif;}.body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #212121;}.card { position: relative; width: 320px; height: 480px; /* 注意：当 Calendly 显示时，可能需要调整此高度 */ background: #0f1923; border-radius: 20px; overflow: hidden;}.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;}
注意： 当 Calendly 嵌入内容显示时，如果其高度超过了 .card 元素的固定高度（例如 height: 480px;），可能会导致内容溢出或被截断。此时，您可能需要调整 .card 的 height 属性为 auto，或者在 Calendly 显示时动态调整 .card 的高度，如 JavaScript 示例中注释所示。
4. 在 Elementor 中集成代码
将上述 HTML、CSS 和 JavaScript 代码集成到 Elementor 页面中，通常有以下几种方式：
HTML 小部件：将 HTML 结构（包括 和 标签）完整地放入 Elementor 的“HTML”小部件中。这是最直接的方法，适用于内容相对独立且不影响全局样式和脚本的情况。
推荐做法：
- 将产品卡片的 HTML 结构（包含 Calendly div）放入一个 Elementor 的“HTML”小部件。
- 将 CSS 代码放入 Elementor 页面或小部件的“高级”->“自定义 CSS”中。
- 将 JavaScript 代码放入 Elementor Pro 的“自定义代码”功能中，并选择在 结束前加载，以确保 DOM 元素已完全加载。
5. 注意事项与优化
- DOM 加载顺序：确保 JavaScript 代码在它尝试访问的 HTML 元素（即 #showandhide）加载完成后执行。将 标签放在 的结束标签之前是常见的最佳实践。用户体验：关闭按钮：考虑在 Calendly 嵌入内容显示时，提供一个明显的“关闭”按钮，让用户可以方便地隐藏它。这可以通过在 Calendly div 内部添加另一个按钮并绑定一个 JavaScript 函数来实现。加载指示器：如果 Calendly 嵌入内容加载较慢，可以考虑在显示 Calendly 之前展示一个加载动画。响应式设计：确保 Calendly 嵌入内容及其容器在不同屏幕尺寸下都能良好显示。min-width 和 height 属性可能需要根据响应式需求进行调整。样式冲突：自定义 CSS 可能会与 Elementor 或主题的默认样式发生冲突。使用更具体的选择器（如 div#showandhide）可以减少冲突的可能性。Calendly 官方嵌入方式：本教程采用的是直接
6. 总结
通过本教程，您应该已经掌握了如何在 WordPress Elementor 中，利用 HTML、CSS 和 JavaScript 实现产品卡片按钮动态显示/隐藏外部内容的技巧。这种方法不仅适用于 Calendly 预约组件，也适用于任何需要动态加载或切换显示状态的 HTML 内容。合理运用这些技术，可以显著提升网站的交互性和用户体验。
以上就是WordPress Elementor 中产品卡片按钮联动外部内容显示教程的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1581742.html
微信扫一扫 
支付宝扫一扫 
