如何在元素器中单击时显示或隐藏部分

主要外卖

• Elementor没有专用的控制来显示或隐藏点击部分,因此这三种工作方法是手风琴小部件,一个内容切换小部件和一个带有短脚本的按钮。
• Elementor Accordion 小部件将任何小部件隐藏在项目内,直到其标题被单击,默认状态设置为"全部崩溃"可使项目在页面加载时保持关闭状态。
• 当主插件切换内容小部件的两个选项之一为空且另一个保留该部分时,它将用作显示和隐藏开关。
• 按钮可以使用按钮上的一个 CSS 类和容器上的一个 CSS 类来显示或隐藏 HTML 小部件中包含大约 10 行 JavaScript 的任何 Elementor 容器。
• Elementor 显示条件和响应式隐藏设置不会对点击做出反应,因为它们会在访问者执行任何操作之前通过规则或设备决定显示的内容。

Elementor 中显示或隐藏点击的部分,请将该部分放在点击时打开的内容内,Accordion 小部件在没有额外插件的情况下执行此操作。一个内容切换会为您提供显示和隐藏开关。一个带有几行脚本的按钮可以显示页面上的任何容器。Elementor 没有单次 “显示点击”设置,因此这三者之一就是路线。

下面的每个方法都是在 Elementor 4.3 上构建和测试的。按触发器的外观选择:标题栏、开关或按钮。

哪种方法适合您的页面

3种方法都隐藏一个部分,直到点击为止,它们在访问者点击的内容和需要多少设置方面有所不同。

方法 1:手风琴小部件

Accordion小部件是显示点击部分的最快方法,因为每个项目都是一个容器,它接受任何小部件。无论你放在里面什么,都将隐藏起来,直到点击标题。

1. 使用 Elementor 编辑页面并拖动 手风琴 小部件到隐藏部分应位于的位置。
2. Delete你不需要的物品,一个隐藏的部分,保留一个物品。
3. 键入访客将单击的标题,例如显示交付详细信息。
4. 单击项目内部并添加您的内容:文本、图像、表单或整个容器布局。
5. 打开 互动 并设置 默认状态 到 都崩溃了.

这种方法的极限是外观,触发始终是内容正上方的标题栏,如果需要样式按钮,或者页面其他地方的触发,请使用方法 3。对于更多标题样式, 高级手风琴小部件 是选项。

方法 2:使用空选项切换内容

A内容切换通常在两个块之间切换,一个块留空,它变成一个显示和隐藏开关:一个标签什么也不显示,另一个显示你的部分。

这些步骤使用 切换内容 master Addons Pro。我们测试了 Elementor 4.3 上的空选项,它没有留下间隙或占位符。

1. 拖动 切换内容 到页面上。
2. 在 元素 list, 标记第一个项目 隐藏详细信息并删除示例文本, 使其内容为空。
3. Label 第二项 显示详情 在编辑器中写内容,或者设置 类型 到模板,并选择保存的模板以进行完整的布局。
4. 打开 切换设置 并离开 活跃指数 1 上,因此页面加载隐藏的章节。
5. 套 位置 到如果开关应位于该部分上方,则为"之前",或者"之后"将其放在下面。

Switch使状态明显,适合营养事实、技术规格或术语等可选细节,要反过来翻转,首先可见部分,将Active Index设置为2。

两段之间切换? 的 切换内容小部件页面 有计费开关、规格表和另外八个现场演示。

方法3:一个按钮和一个短脚本

Tright 必须是普通按钮时,或者按钮和部分在不同位置时使用脚本,你给按钮添加一个 CSS 类,给部分添加一个,把一个小片段粘贴到一个 HTML 小部件中。

1. 添加a 按钮 小部件。在 高级 > CSS 课程的,类型 show-hide-button。将按钮的链接字段留空。
2. 选择您要隐藏的容器。在 高级 > CSS 课程的,类型 show-hide-target.
3. 拖动一个 超文本标记语言 widget 页面上的任何位置,然后粘贴下面的代码。
4. 更新页面并在前端进行测试。

<style>
.show-hide-target { display: none; }
.show-hide-target.is-open { display: flex; }
.elementor-editor-active .show-hide-target { display: flex; }
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".show-hide-button a, .show-hide-button button").forEach(function (button) {
    button.addEventListener("click", function (event) {
      event.preventDefault();
      document.querySelectorAll(".show-hide-target").forEach(function (target) {
        target.classList.toggle("is-open");
      });
    });
  });
});
</script>

第一个样式规则隐藏容器。一旦脚本添加了第二个样式规则,第二个就会显示它 is-open class。third 保持 Elementor 编辑器内部的容器可见,所以你仍然可以编辑它。每次点击按钮都会添加或删除类。

This方法上的三个注意事项。每个带有类的容器一起打开,所以如果您需要在一页上单独对,则使用不同的类名称。按钮文本本身不会改变。并且如果缓存或脚本优化插件延迟了JavaScript,则可以忽略第一次点击,直到脚本加载。

如果该部分应在页面上打开,请使用弹出窗口。请参阅 elementor 中如何添加弹出窗口.

哪些不起作用:显示条件和响应式设置

Two Elementor功能听起来应该这样做,而不是。两者都隐藏内容,但都不会对点击做出反应。

• Responsive设置。Advanced > Responsive有隐藏在桌面上,隐藏在平板电脑上和隐藏在移动设备上。他们隐藏一个元素按屏幕大小,一直。
• 显示条件。 Elementor 的显示条件 按规则显示或隐藏元素,例如登录状态、用户角色、日期或浏览器。当页面加载时做出决定。

当网站决定访问者看到的内容时,它们是正确的工具。我们将其覆盖在 元素显示条件并且 显示条件扩展 page列出了它支持的每一条规则,当访问者应该决定时,使用上面三种点击方式之一。

常见问题

最后的想法

Elementor 中显示或隐藏点击部分有三种可靠的方法,当标题栏没问题时使用 Accordion 小部件,当您想要可见的开关时使用一个空选项切换内容,当触发器必须位于其他地方时使用带有短脚本的按钮。

如果您最终在两个部分之间切换的频率高于隐藏一个部分,那么 切换内容小部件 是为此而构建的。

相关阅读

• Elementor 显示条件:按规则显示和隐藏内容
• 如何在 Elementor 中添加弹出窗口
• 元素器滚动效果
• 如何以 Elementor 创建切换按钮(3 种方式)
• 元素切换器与手风琴、选项卡与内容切换器