本教程详细讲解如何在Divi主题中，通过JavaScript代码实现手风琴（Accordion）模块默认展开其最后一个项目。文章将提供清晰的代码示例，并指导如何将其集成到Divi网站，确保手风琴在页面加载时，仅最后一个项目处于打开状态，提升用户体验和内容展示的灵活性。
Divi主题的手风琴模块是一个非常实用的内容展示工具，但其默认行为通常是所有项目都处于关闭状态，或者第一个项目默认展开。在某些设计场景下，我们可能希望页面加载时，手风琴的最后一个项目能够默认展开，以突出特定信息或引导用户关注结尾内容。本教程将指导您如何通过自定义JavaScript代码实现这一功能。
理解Divi手风琴的结构
在深入代码之前，了解Divi手风琴模块的HTML结构和相关CSS类是至关重要的。一个典型的Divi手风琴模块通常包含以下关键元素：
- 模块容器: 整个手风琴模块的外部容器，通常具有 et_pb_accordion 类。
- 手风琴项 (Toggle): 每一个可展开/折叠的项目，通常具有 et_pb_toggle 类。
- 展开/折叠状态: Divi通过添加或移除 et_pb_toggle_open (展开) 和 et_pb_toggle_close (折叠) 类来控制手风琴项的状态。
- 标题: 手风琴项的标题部分，通常是 et_pb_toggle_title。
- 内容: 手风琴项的实际内容，通常是 et_pb_toggle_content，其 display 属性会根据展开/折叠状态进行切换。
我们的目标就是通过JavaScript，在页面加载完成后，精确控制这些类和样式，从而实现最后一个项目的默认展开。
实现思路
由于Divi手风琴的默认行为是由其内置的JavaScript控制的，单纯的CSS :last-child 规则无法直接实现“默认展开”的效果，因为Divi的JS会在页面加载后重新应用其逻辑。因此，我们需要使用JavaScript来干预这一过程。
核心思路如下：
- 等待DOM加载完成: 确保在Divi手风琴模块及其内容完全加载到DOM之后再执行脚本。
- 定位目标手风琴模块: 为了避免影响页面上所有手风琴模块，我们将为目标模块添加一个自定义CSS类，并通过这个类来精确选择。
- 关闭所有手风琴项: 首先遍历目标模块中的所有手风琴项，确保它们都处于关闭状态。这通过移除 et_pb_toggle_open 类并添加 et_pb_toggle_close 类，同时将内容区域的 display 属性设置为 none 来实现。
- 打开最后一个手风琴项: 找到目标模块中的最后一个手风琴项，然后移除 et_pb_toggle_close 类并添加 et_pb_toggle_open 类，同时将内容区域的 display 属性设置为 block。
JavaScript解决方案
为了实现上述思路，我们将编写一段jQuery代码。
步骤一：为手风琴模块添加自定义CSS类
首先，在Divi Builder中编辑您希望实现此功能的手风琴模块：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 点击手风琴模块的齿轮图标进入设置。
- 切换到高级选项卡。
- 在CSS ID & 类部分，找到CSS类字段。
- 输入一个唯一的类名，例如 my-last-open-accordion。
这将允许我们的JavaScript代码精确地定位到这个特定的手风琴模块。
步骤二：编写JavaScript代码
将以下JavaScript代码添加到您的网站。
jQuery(document).ready(function($) {
// 目标手风琴模块的自定义CSS类。
// 请确保与您在Divi Builder中设置的类名一致。
var $targetAccordion = $('.my-last-open-accordion');
// 检查目标手风琴模块是否存在于页面上
if ($targetAccordion.length) {
// 获取该模块内的所有手风琴项
var $toggles = $targetAccordion.find('.et_pb_toggle');
// 确保手风琴项存在
if ($toggles.length > 0) {
// 1. 遍历所有手风琴项，确保它们都处于关闭状态
$toggles.each(function() {
var $toggle = $(this);
// 如果当前项是打开的，则将其关闭
if ($toggle.hasClass('et_pb_toggle_open')) {
$toggle.removeClass('et_pb_toggle_open').addClass('et_pb_toggle_close');
// 直接设置内容区域的display属性为none
$toggle.find('.et_pb_toggle_content').css('display', 'none');
}
});
// 2. 找到最后一个手风琴项并将其打开
var $lastToggle = $toggles.last();
// 如果最后一个项是关闭的，则将其打开
if ($lastToggle.hasClass('et_pb_toggle_close')) {
$lastToggle.removeClass('et_pb_toggle_close').addClass('et_pb_toggle_open');
// 直接设置内容区域的display属性为block
$lastToggle.find('.et_pb_toggle_content').css('display', 'block');
}
}
}
});代码解释：
- jQuery(document).ready(function($) { ... });: 这是一个标准的jQuery函数，确保在DOM完全加载并准备好之后才执行内部代码，避免因元素未加载而导致的错误。
- var $targetAccordion = $('.my-last-open-accordion');: 这一行通过我们之前在Divi Builder中添加的自定义CSS类来选择目标手风琴模块。
- if ($targetAccordion.length) { ... }: 检查是否成功找到了目标模块，以避免在模块不存在时执行不必要的代码。
- var $toggles = $targetAccordion.find('.et_pb_toggle');: 在目标模块内部查找所有具有 et_pb_toggle 类的元素，这些就是单个的手风琴项。
- $toggles.each(function() { ... });: 遍历所有找到的手风琴项。
- if ($toggle.hasClass('et_pb_toggle_open')) { ... }: 检查当前手风琴项是否已经处于打开状态。
- $toggle.removeClass('et_pb_toggle_open').addClass('et_pb_toggle_close');: 移除打开状态的类，添加关闭状态的类。
- $toggle.find('.et_pb_toggle_content').css('display', 'none');: 将手风琴项的内容区域隐藏。
- var $lastToggle = $toggles.last();: 选取 et_pb_toggle 集合中的最后一个元素。
- if ($lastToggle.hasClass('et_pb_toggle_close')) { ... }: 检查最后一个手风琴项是否处于关闭状态。
- $lastToggle.removeClass('et_pb_toggle_close').addClass('et_pb_toggle_open');: 移除关闭状态的类，添加打开状态的类。
- $lastToggle.find('.et_pb_toggle_content').css('display', 'block');: 将最后一个手风琴项的内容区域显示出来。
代码集成方式
您可以选择以下任意一种方式将上述JavaScript代码添加到您的Divi网站：
-
Divi主题选项 -> 集成:
- 登录WordPress后台，导航到 Divi -> 主题选项。
- 点击 集成 选项卡。
- 将代码粘贴到 在 中添加代码 区域。
- 点击 保存更改。
-
使用Divi代码模块 (仅适用于特定页面):
- 在您使用手风琴模块的页面上，通过Divi Builder添加一个 代码模块。
- 将JavaScript代码（包括 <script> 标签）粘贴到代码模块中。</script>
- 这种方法适用于仅在特定页面实现此功能。
-
子主题的 functions.php (推荐):
- 如果您正在使用Divi子主题，这是最专业和推荐的方式。
- 编辑子主题的 functions.php 文件。
- 将以下代码添加到 functions.php 文件中：
<?php function custom_divi_accordion_last_open_script() { // 确保只在前端页面加载此脚本 if ( ! is_admin() ) { wp_add_inline_script( 'divi-custom-script', ' jQuery(document).ready(function($) { var $targetAccordion = $(".my-last-open-accordion"); if ($targetAccordion.length) { var $toggles = $targetAccordion.find(".et_pb_toggle"); if ($toggles.length > 0) { $toggles.each(function() { var $toggle = $(this); if ($toggle.hasClass("et_pb_toggle_open")) { $toggle.removeClass("et_pb_toggle_open").addClass("et_pb_toggle_close"); $toggle.find(".et_pb_toggle_content").css("display", "none"); } }); var $lastToggle = $toggles.last(); if ($lastToggle.hasClass("et_pb_toggle_close")) { $lastToggle.removeClass("et_pb_toggle_close").addClass("et_pb_toggle_open"); $lastToggle.find(".et_pb_toggle_content").css("display", "block"); } } } }); ', 'after' ); } } add_action( 'wp_enqueue_scripts', 'custom_divi_accordion_last_open_script' );- 注意: divi-custom-script 是一个示例的脚本句柄，您可以根据需要调整。wp_add_inline_script 会将您的JavaScript代码作为内联脚本添加到页面。
注意事项
- jQuery依赖: Divi主题默认加载jQuery，所以您可以直接使用 jQuery 或其别名 $ (在 ready 函数内部)。
- 选择器精确性: 务必使用自定义CSS类来定位特定的手风琴模块，避免影响到页面上其他手风琴模块的默认行为。
- 缓存问题: 在添加或修改代码后，请务必清除您的网站缓存（包括主题缓存、插件缓存和浏览器缓存），以确保更改生效。
- Divi版本更新: Divi主题的更新可能会改变其内部HTML结构或JavaScript行为。如果未来代码失效，请检查Divi的更新日志并相应调整代码。
- 动画效果: 本教程中的代码直接设置 display 属性，没有包含展开/折叠的动画效果。Divi默认的动画是通过jQuery的 slideUp() / slideDown() 实现的。如果您需要动画，可以将 css('display', 'none') 替换为 slideUp()，将 css('display', 'block') 替换为 slideDown()。但请注意，这可能会与Divi自身的JS动画产生冲突，需要谨慎测试。
总结
通过上述JavaScript代码和集成方法，您可以轻松地实现Divi手风琴模块默认展开最后一个项目的功能。这不仅提升了网站内容的展示灵活性，也为用户提供了更加定制化的浏览体验。请务必遵循教程中的步骤，并根据您的具体需求进行调整和测试。
